customer Main style

@@ -16,7 +16,10 @@ import post from "../../utils/fetch";
 export default class Home extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      hasCustomer: true,
+      customersList: ["张某某", "周某某", "林某某", "李某某"]
+    };
   }
   componentWillMount() {}
 
@@ -52,10 +55,14 @@ export default class Home extends Component {
 
   render() {
     const { navigate } = this.props.navigation;
+    const { hasCustomer, customers } = this.state;
     return (
       <View style={styles.container}>
-        {/* <Begin /> */}
-        <Main />
+        {hasCustomer ? (
+          <Main customersList={this.state.customersList} />
+        ) : (
+          <Begin />
+        )}
       </View>
     );
   }
@@ -91,19 +98,37 @@ class Main extends Component {
     super(props);
     this.state = {};
   }
+
   render() {
+    const { customersList } = this.props;
     return (
       <View style={styles.mainContaier}>
         <View style={styles.mainBtnContaier}>
           <TouchableOpacity style={styles.mainBtnContaierLeft}>
-            <Image style={styles.mainBtnLeftImg} source={require("../../assets/customer/ic_add.png")} />
+            <Image
+              style={styles.mainBtnLeftImg}
+              source={require("../../assets/customer/ic_add.png")}
+            />
             <Text style={styles.mainBtnLeftText}>手动添加</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.mainBtnContaierRight}>
-            <Image style={styles.mainBtnRightImg} source={require("../../assets/customer/ic_message.png")} />
+            <Image
+              style={styles.mainBtnRightImg}
+              source={require("../../assets/customer/ic_message.png")}
+            />
             <Text style={styles.mainBtnRightText}>通信录导入</Text>
           </TouchableOpacity>
         </View>
+        <ScrollView style={styles.mainSvcContainer}>
+          {customersList.map((item, index) => {
+            return (
+              <TouchableOpacity key={index} style={styles.mainCustomerItem}>
+                <Text style={styles.mainCustomerItemText}>{item}</Text>
+                <Image style={styles.mainCustomerItemImg} source={require("../../assets/customer/rightArrow_gray.png")} />
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
       </View>
     );
   }
@@ -159,40 +184,68 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: "white"
   },
-  mainContaier: {},
+  mainContaier: {
+    flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    backgroundColor: "#EFEFEF"
+  },
   mainBtnContaier: {
     marginVertical: 10,
     backgroundColor: "white",
     flexDirection: "row",
     justifyContent: "space-around",
-    paddingVertical: 13,
+    paddingVertical: 13
   },
   mainBtnContaierLeft: {
     flexDirection: "row",
     justifyContent: "center",
-    alignItems: "center",
+    alignItems: "center"
   },
   mainBtnLeftImg: {
     width: 24,
-    height: 24,
+    height: 24
   },
   mainBtnLeftText: {
     marginLeft: 8,
     fontSize: 15,
-    color: "#242424",
+    color: "#242424"
   },
   mainBtnContaierRight: {
     flexDirection: "row",
     justifyContent: "center",
-    alignItems: "center",
+    alignItems: "center"
   },
   mainBtnRightImg: {
     width: 24,
-    height: 24,
+    height: 24
   },
   mainBtnRightText: {
     marginLeft: 8,
     fontSize: 15,
-    color: "#242424",
+    color: "#242424"
+  },
+  mainSvcContainer: {
+    backgroundColor: "white",
+  },
+  mainCustomerItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "white",
+    paddingVertical: 12,
+    marginLeft: 16,
+    marginRight: 10,
+    borderStyle: "solid",
+    borderColor: "#F2F2F2",
+    borderTopWidth: 1,
+  },
+  mainCustomerItemText: {
+    fontSize: 16,
+    color: "#202020",
+  },
+  mainCustomerItemImg: {
+    width: 14,
+    height: 14,
   },
 });