完成基本跳转

+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  WebView,
+  View,
+} from 'react-native';
+
+export default class CommonWebview extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    console.log("url",this.props.url)
+    return (
+      <WebView
+        style={styles.container}
+        source={{uri: this.props.url}}
+      />
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 64,
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    backgroundColor: "#EFEFEF"
+  },
+});

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from "react";
-import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, Image, ScrollView } from "react-native";
-
-export default class NewsList extends Component {
-  render() {
-    return (
-      <ScrollView style={styles.container} automaticallyAdjustContentInsets={false}>
-        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
-        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
-        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
-        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
-      </ScrollView>
-    );
-  }
-}
-
-class ListItem extends Component {
-  render() {
-    return (
-      <TouchableOpacity style={styles.itemContainer}>
-        <View style={styles.itemImgWrapper}></View>
-        <View style={styles.itemRightWrapper}>
-          <Text style={styles.itemTextTop}>{this.props.title}</Text>
-          <Text style={styles.itemTextBottom}>{this.props.context}</Text>
-        </View>
-      </TouchableOpacity>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height:150,
-  },
-  itemContainer: {
-    height: 90,
-    backgroundColor: "#fff",
-    flexDirection: 'row',
-    alignItems: "center",
-    borderTopWidth: 1,
-    borderTopColor: "#EEEEEE",
-    borderStyle: "solid",
-    paddingLeft: 13,
-    paddingRight: 13,
-  },
-  itemImgWrapper: {
-    width:74,
-    height:66,
-    backgroundColor: "#ccc",
-    marginRight: 12
-  },
-  itemRightWrapper: {
-    justifyContent: "center",
-    height: 66,
-    flex: 1
-    // marginRight: 13
-  },
-  itemTextTop: {
-    fontSize: 16,
-    color: "#202020",
-    lineHeight: 21
-  },
-  itemTextBottom: {
-    fontSize: 13,
-    color: "#7A7A7A",
-    lineHeight: 18
-  },
-});

+import React, { Component } from "react";
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  Image
+} from "react-native";
+import CommonWebView from "../../Components/CommonWebView";
+
+export default class AllProduct extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ListData: [
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.baidu.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.google.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.zhihu.com/",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.baidu.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        }
+      ]
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {/* <NewsList /> */}
+        <ScrollView
+          style={styles.scrollViewContainer}
+          automaticallyAdjustContentInsets={false}
+        >
+          {this.state.ListData.map((item, index) => {
+            return (
+              <TouchableOpacity
+                style={styles.itemContainer}
+                key={index}
+                onPress={() => {
+                  this.props.navigator.push({
+                    component: CommonWebView,
+                    passProps: {
+                      url: item.url
+                    }
+                  });
+                }}
+              >
+                <Image style={styles.itemImgWrapper} source={item.imgurl} />
+                <View style={styles.itemRightWrapper}>
+                  <Text style={styles.itemTextTop} numberOfLines={2}>
+                    {item.title}
+                  </Text>
+                  <Text style={styles.itemTextBottom}>{item.time}</Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    backgroundColor: "#EFEFEF",
+    paddingTop: 74
+  },
+  scrollViewContainer: {
+    height: 300
+    // backgroundColor: "red"
+  },
+  scrollViewText: {
+    color: "#7A7A7A",
+    fontSize: 13,
+    marginTop: 10,
+    textAlign: "center"
+  },
+  itemContainer: {
+    height: 102,
+    backgroundColor: "#fff",
+    flexDirection: "row",
+    alignItems: "center",
+    borderTopWidth: 1,
+    borderTopColor: "#EEEEEE",
+    borderStyle: "solid",
+    paddingLeft: 13,
+    paddingRight: 13
+  },
+  itemImgWrapper: {
+    width: 88,
+    height: 78,
+    // backgroundColor: "#ccc",
+    marginRight: 12
+  },
+  itemRightWrapper: {
+    justifyContent: "center",
+    height: 66,
+    flex: 1
+    // marginRight: 13
+  },
+  itemTextTop: {
+    fontSize: 16,
+    color: "#202020",
+    lineHeight: 21
+  },
+  itemTextBottom: {
+    fontSize: 13,
+    color: "#7A7A7A",
+    lineHeight: 18
+  }
+});

 import React, { Component } from "react";
 import React, { Component } from "react";
-import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ScrollView
+} from "react-native";
 import Carousel from "../../Components/Carousel";
 import Carousel from "../../Components/Carousel";
-import NewsList from "./NewList";
-
-export default class Main extends Component {
+import AllProduct from "./allProduct";
+import CommonWebView from "../../Components/CommonWebView";
 
 
+export default class Home extends Component {
+  constructor(props) {
+    super(props);
+    this._renderMap = this._renderMap.bind(this);
+    this.state = {
+      ListData: [
+        {
+          title: "平安保险第一个",
+          context: "600万医疗报废，自费药，进口药，器材费",
+          url: "https://www.baidu.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险第二个",
+          context: "600万医疗报废，自费药，进口药，器材费",
+          url: "https://www.google.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险第三个",
+          context: "600万医疗报废，自费药，进口药，器材费",
+          url: "https://www.zhihu.com/",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险第四个",
+          context: "600万医疗报废，自费药，进口药，器材费",
+          url: "https://www.baidu.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        }
+      ]
+    };
+  }
   componentDidMount() {
   componentDidMount() {
-    console.log('thisprops',this.props);
+    console.log("thisprops", this.props);
+  }
+  _renderMap() {
+    return this.state.ListData.map((item, index) => {
+      return (
+        <TouchableOpacity
+          style={styles.itemContainer}
+          key={index}
+          onPress={() => {
+            this._jumpToWebView(item);
+          }}
+        >
+          <Image style={styles.itemImgWrapper} source={item.imgurl} />
+          <View style={styles.itemRightWrapper}>
+            <Text style={styles.itemTextTop}>{item.title}</Text>
+            <Text style={styles.itemTextBottom}>{item.context}</Text>
+          </View>
+        </TouchableOpacity>
+      );
+    });
+  }
+  _jumpToWebView(item) {
+    this.props.navigator.push({
+      component: CommonWebView,
+      passProps: {
+        url: item.url
+      }
+    });
+  }
+  gotoAllProduct() {
+    this.props.navigator.push({
+      component: AllProduct,
+      title: "全部产品"
+    });
   }
   }
-
   render() {
   render() {
     return (
     return (
       <View style={styles.container}>
       <View style={styles.container}>
         <Carousel />
         <Carousel />
-        <TouchableOpacity style={styles.midContainer}>
-          <Image source={require('../../assets/首页的副本/pic.png')} style={{width:72, height:18}} />
+        <TouchableOpacity
+          style={styles.midContainer}
+          onPress={() => {
+            this.gotoAllProduct();
+          }}
+        >
+          <Image
+            source={require("../../assets/home/pic.png")}
+            style={{ width: 72, height: 18 }}
+          />
           <Text style={styles.midText}>平安保险2017版</Text>
           <Text style={styles.midText}>平安保险2017版</Text>
         </TouchableOpacity>
         </TouchableOpacity>
         <View style={styles.textContainer}>
         <View style={styles.textContainer}>
           <Text style={styles.minText}>保险头条</Text>
           <Text style={styles.minText}>保险头条</Text>
         </View>
         </View>
-        <NewsList /> 
+        <ScrollView
+          style={styles.listContainer}
+          automaticallyAdjustContentInsets={false}
+        >
+          {this._renderMap()}
+        </ScrollView>
       </View>
       </View>
     );
     );
   }
   }
@@ -38,24 +123,59 @@ const styles = StyleSheet.create({
     height: 45,
     height: 45,
     // width: 200,
     // width: 200,
     // alignSelf: 'center',
     // alignSelf: 'center',
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     alignItems: "center",
     alignItems: "center",
-    flexDirection: 'row',
+    flexDirection: "row",
     paddingLeft: 13
     paddingLeft: 13
   },
   },
   midText: {
   midText: {
     fontSize: 15,
     fontSize: 15,
     paddingLeft: 9,
     paddingLeft: 9,
     // fontFamily: PingFang-SC-Medium,
     // fontFamily: PingFang-SC-Medium,
-    color: '#202020'
+    color: "#202020"
   },
   },
   textContainer: {
   textContainer: {
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     marginTop: 10,
     marginTop: 10,
     height: 45,
     height: 45,
     justifyContent: "center",
     justifyContent: "center",
-    paddingLeft: 13,
+    paddingLeft: 13
     // fontSize: 15,
     // fontSize: 15,
     // color: "#202020",
     // color: "#202020",
+  },
+  listContainer: {
+    height: 150
+  },
+  itemContainer: {
+    height: 90,
+    backgroundColor: "#fff",
+    flexDirection: "row",
+    alignItems: "center",
+    borderTopWidth: 1,
+    borderTopColor: "#EEEEEE",
+    borderStyle: "solid",
+    paddingLeft: 13,
+    paddingRight: 13
+  },
+  itemImgWrapper: {
+    width: 74,
+    height: 66,
+    marginRight: 12
+  },
+  itemRightWrapper: {
+    justifyContent: "center",
+    height: 66,
+    flex: 1
+    // marginRight: 13
+  },
+  itemTextTop: {
+    fontSize: 16,
+    color: "#202020",
+    lineHeight: 21
+  },
+  itemTextBottom: {
+    fontSize: 13,
+    color: "#7A7A7A",
+    lineHeight: 18
   }
   }
 });
 });

-
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
 import {
   AppRegistry,
   AppRegistry,
   StyleSheet,
   StyleSheet,
@@ -8,45 +7,78 @@ import {
   ScrollView,
   ScrollView,
   TouchableOpacity,
   TouchableOpacity,
   Image
   Image
-} from 'react-native';
-
-
+} from "react-native";
+import CommonWebView from "../../Components/CommonWebView";
 
 
 export default class InsuranceChurch extends Component {
 export default class InsuranceChurch extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <NewsList />
-      </View>
-    );
+  constructor(props) {
+    super(props);
+    // this._renderMap = this._renderMap.bind(this);
+    this.state = {
+      ListData: [
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.baidu.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.google.com",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.zhihu.com/",
+          imgurl: require("../../assets/circle/newspic.png")
+        },
+        {
+          title: "平安保险2017版平安保险平安保险平安保险",
+          time: "刚刚",
+          url: "https://www.baidu.com",
+          imgurl: require("../../assets/circle/newspic.png")
         }
         }
-}
-
-class NewsList extends Component {
-  render() {
-    return (
-      <ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
-        <ListItem title={"平安保险2017版平安保险平安保险平安保险"} content={"刚刚"} />
-        <ListItem title={"平安保险2017版"} content={"刚刚"} />
-        <ListItem title={"平安保险2017版平安保险平安保险平安保平安保险2017版平安保险平安保险平安保险平安保险平安保险平安保险2017版平安保险平安保险平安保险平安保险平安保险险平安保险平安保险"} content={"刚刚"} />
-        <ListItem title={"平安保险2017版"} content={"刚刚"} />
-        <Text style={styles.scrollViewText}>没有更多了</Text>
-      </ScrollView>
-    );
+      ]
+    };
   }
   }
-}
 
 
-class ListItem extends Component {
   render() {
   render() {
     return (
     return (
-      <TouchableOpacity style={styles.itemContainer}>
-        <View style={styles.itemImgWrapper}></View>
+      <View style={styles.container}>
+        {/* <NewsList /> */}
+        <ScrollView
+          style={styles.scrollViewContainer}
+          automaticallyAdjustContentInsets={false}
+        >
+          {this.state.ListData.map((item, index) => {
+            return (
+              <TouchableOpacity
+                style={styles.itemContainer}
+                key={index}
+                onPress={() => {
+                  this.props.navigator.push({
+                    component: CommonWebView,
+                    passProps: {
+                      url: item.url
+                    }
+                  });
+                }}
+              >
+                <Image style={styles.itemImgWrapper} source={item.imgurl} />
                 <View style={styles.itemRightWrapper}>
                 <View style={styles.itemRightWrapper}>
-          <Text style={styles.itemTextTop} numberOfLines={2}>{this.props.title}</Text>
-          <Text style={styles.itemTextBottom}>{this.props.content}</Text>
+                  <Text style={styles.itemTextTop} numberOfLines={2}>
+                    {item.title}
+                  </Text>
+                  <Text style={styles.itemTextBottom}>{item.time}</Text>
                 </View>
                 </View>
               </TouchableOpacity>
               </TouchableOpacity>
-    )
+            );
+          })}
+        </ScrollView>
+      </View>
+    );
   }
   }
 }
 }
 
 
@@ -59,7 +91,7 @@ const styles = StyleSheet.create({
     paddingTop: 74
     paddingTop: 74
   },
   },
   scrollViewContainer: {
   scrollViewContainer: {
-    height: 300,
+    height: 300
     // backgroundColor: "red"
     // backgroundColor: "red"
   },
   },
   scrollViewText: {
   scrollViewText: {
@@ -71,18 +103,18 @@ const styles = StyleSheet.create({
   itemContainer: {
   itemContainer: {
     height: 102,
     height: 102,
     backgroundColor: "#fff",
     backgroundColor: "#fff",
-    flexDirection: 'row',
+    flexDirection: "row",
     alignItems: "center",
     alignItems: "center",
     borderTopWidth: 1,
     borderTopWidth: 1,
     borderTopColor: "#EEEEEE",
     borderTopColor: "#EEEEEE",
     borderStyle: "solid",
     borderStyle: "solid",
     paddingLeft: 13,
     paddingLeft: 13,
-    paddingRight: 13,
+    paddingRight: 13
   },
   },
   itemImgWrapper: {
   itemImgWrapper: {
-    width:88,
-    height:78,
-    backgroundColor: "#ccc",
+    width: 88,
+    height: 78,
+    // backgroundColor: "#ccc",
     marginRight: 12
     marginRight: 12
   },
   },
   itemRightWrapper: {
   itemRightWrapper: {
@@ -100,6 +132,5 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontSize: 13,
     color: "#7A7A7A",
     color: "#7A7A7A",
     lineHeight: 18
     lineHeight: 18
-  },
+  }
 });
 });
-

@@ -9,12 +9,13 @@ import {
   TouchableOpacity,
   TouchableOpacity,
   Image
   Image
 } from 'react-native';
 } from 'react-native';
+import CommonWebView from "../../Components/CommonWebView";
 
 
 export default class InsuranceCircle extends Component {
 export default class InsuranceCircle extends Component {
   render() {
   render() {
     return (
     return (
       <View style={styles.container}>
       <View style={styles.container}>
-        <NewsList />
+        <NewsList jumP={() => {this.props.navigator.push({component:CommonWebView,title:"hjjj",rightButtonTitle: 'Cancel',})}} />
       </View>
       </View>
     );
     );
   }
   }
@@ -25,6 +26,7 @@ class NewsList extends Component {
     return (
     return (
       <ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
       <ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
         <ListItem
         <ListItem
+          jump={this.props.jumP}
           title={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
           title={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
           content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
           content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
           name={"汉克斯"}
           name={"汉克斯"}
@@ -45,13 +47,13 @@ class NewsList extends Component {
 class ListItem extends Component {
 class ListItem extends Component {
   render() {
   render() {
     return (
     return (
-      <TouchableOpacity style={styles.itemContainer}>
+      <TouchableOpacity style={styles.itemContainer} onPress={this.props.jump}>
         <Text style={styles.itemTitle} numberOfLines={2}>{this.props.title}</Text>
         <Text style={styles.itemTitle} numberOfLines={2}>{this.props.title}</Text>
         <Text style={styles.itemContent} numberOfLines={3}>{this.props.content}</Text>
         <Text style={styles.itemContent} numberOfLines={3}>{this.props.content}</Text>
         <View style={styles.itemInfoWrapper}>
         <View style={styles.itemInfoWrapper}>
           <View style={styles.itemInfoLeft}>
           <View style={styles.itemInfoLeft}>
-            {/* <Image style={styles.itemInfoIcon} /> */}
-            <View style={styles.itemInfoIcon}></View>
+            <Image source={require("../../assets/Mine/iconpic1.png")} style={[styles.itemInfoIcon,{width:26, height:26}]} />
+            {/* <View style={styles.itemInfoIcon}></View> */}
             <Text style={styles.itemInfoName}>{this.props.name}</Text>
             <Text style={styles.itemInfoName}>{this.props.name}</Text>
           </View>
           </View>
           <Text style={styles.itemInfoRight}>{this.props.num} 评论</Text>
           <Text style={styles.itemInfoRight}>{this.props.num} 评论</Text>
@@ -109,11 +111,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     alignItems: "center",
   },
   },
   itemInfoIcon: {
   itemInfoIcon: {
-    width: 26,
-    height: 26,
-    backgroundColor: "#ccc",
     marginRight: 10,
     marginRight: 10,
-    borderRadius: 26,
   },
   },
   itemInfoName: {
   itemInfoName: {
     fontSize: 13,
     fontSize: 13,

@@ -4,7 +4,9 @@ import {
   AppRegistry,
   AppRegistry,
   StyleSheet,
   StyleSheet,
   Text,
   Text,
-  View
+  View,
+  TouchableOpacity,
+  Image,
 } from 'react-native';
 } from 'react-native';
 
 
 
 
@@ -13,25 +15,134 @@ export default class Mine extends Component {
   render() {
   render() {
     return (
     return (
       <View style={styles.container}>
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          我的
-        </Text>
+        <TouchableOpacity style={styles.header}>
+          <View style={styles.headerLeft}>
+            <Image source={require("../../assets/Mine/iconpic1.png")} style={styles.mineIcon} />
+            <Text style={styles.mineName}>汉克斯</Text>
+          </View>
+          <Image source={require("../../assets/Mine/rightArrow_white.png")} style={styles.headerRight}/>
+        </TouchableOpacity>
+        <BarList style={styles.midContainer} />
+        <TouchableOpacity style={styles.loginOut}>
+          <Text style={styles.loginOutText}>退出登录</Text>
+        </TouchableOpacity>
       </View>
       </View>
     );
     );
   }
   }
 }
 }
 
 
+class BarList extends Component {
+  render() {
+    return (
+      <View>
+        <ListItem title={"消息通知"} num={"11"} />
+        <ListItem title={"我的提问"} />
+      </View>
+    )
+  }
+}
+
+class ListItem extends Component {
+  render() {
+    return (
+      <TouchableOpacity style={styles.itemContainer}>
+        <View style={styles.itemLeft}>
+          <Image style={styles.leftIcon} source={require("../../assets/tabbar/ic_circle_s.png")} />
+          {/* <Image style={styles.leftIcon} source={require("../../assets/Mine/iconpic1.png")} /> */}
+          <Text style={styles.leftTitle}>{this.props.title}</Text>
+          {this.props.num?<Text style={styles.leftNum}> ({this.props.num})</Text>:null}
+        </View>
+        <Image style={styles.itemRight} source={require("../../assets/Mine/rightArrow_gray.png")} />
+      </TouchableOpacity>
+    )
+  }
+}
+
 const styles = StyleSheet.create({
 const styles = StyleSheet.create({
   container: {
   container: {
     flex: 1,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+    justifyContent: "flex-start",
+    alignItems: "stretch",
+    backgroundColor: "#EFEFEF",
+    paddingTop: 64,
+  },
+  header: {
+    backgroundColor: "#1B9341",
+    height: 78,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingLeft: 13,
+    paddingRight: 13,
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  headerLeft: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  mineIcon: {
+    width: 46,
+    height: 46,
+    marginRight: 14
+  },
+  mineName: {
+    fontSize: 16,
+    lineHeight: 22,
+    color: "#fff"
+  },
+  headerRight: {
+    width: 14,
+    height: 14,
+  },
+  midContainer: {
+    // marginTop: 10,
+    // marginBottom: 10,
+    // height: 92,
+  },
+  itemContainer: {
+    height: 46,
+    paddingLeft: 16,
+    paddingRight: 16,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#fff",
+    borderStyle: "solid",
+    borderColor: "#F0F0F0",
+    borderBottomWidth: 1,
+  },
+  itemLeft: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  leftIcon: {
+    marginRight: 11,
+    width: 16,
+    height: 16,
+  },
+  leftTitle: {
+    fontSize: 15,
+    color: "#242424"
+  },
+  leftNum: {
+    fontSize: 15,
+    color: "#EE6723"
+  },
+  itemRight: {
+    width: 14,
+    height: 14,
+  },
+  loginOut: {
+    marginTop: 10,
+    height: 46,
+    backgroundColor: "#fff",
+    justifyContent: "center",
+  },
+  loginOutText: {
+    textAlign: "center",
+    fontSize: 15,
   },
   },
 });
 });
 
 

@@ -30,6 +30,7 @@ export default class Main extends Component {
       <TabBarIOS tintColor="#08CC6A" barTintColor="white">
       <TabBarIOS tintColor="#08CC6A" barTintColor="white">
         <TabBarIOS.Item
         <TabBarIOS.Item
           title="首页"
           title="首页"
+          icon={require("../assets/tabbar/ic_home_n.png")}
           selected={this.state.selectedItem == "home"}
           selected={this.state.selectedItem == "home"}
           onPress={() => {
           onPress={() => {
             this.setState({
             this.setState({
@@ -43,10 +44,12 @@ export default class Main extends Component {
               component: Home,
               component: Home,
               title: "保护神"
               title: "保护神"
             }}
             }}
+            
           />
           />
         </TabBarIOS.Item>
         </TabBarIOS.Item>
         <TabBarIOS.Item
         <TabBarIOS.Item
           title="保圈"
           title="保圈"
+          icon={require("../assets/tabbar/ic_circle_n.png")}
           selected={this.state.selectedItem == "insuranceCircle"}
           selected={this.state.selectedItem == "insuranceCircle"}
           onPress={() => {
           onPress={() => {
             this.setState({
             this.setState({
@@ -64,6 +67,7 @@ export default class Main extends Component {
         </TabBarIOS.Item>
         </TabBarIOS.Item>
         <TabBarIOS.Item
         <TabBarIOS.Item
           title="保堂"
           title="保堂"
+          icon={require("../assets/tabbar/ic_umbrella_n.png")}
           selected={this.state.selectedItem == "insuranceChurch"}
           selected={this.state.selectedItem == "insuranceChurch"}
           onPress={() => {
           onPress={() => {
             this.setState({
             this.setState({
@@ -81,6 +85,7 @@ export default class Main extends Component {
         </TabBarIOS.Item>
         </TabBarIOS.Item>
         <TabBarIOS.Item
         <TabBarIOS.Item
           title="我的"
           title="我的"
+          icon={require("../assets/tabbar/ic_mine_n.png")}
           selected={this.state.selectedItem == "mine"}
           selected={this.state.selectedItem == "mine"}
           onPress={() => {
           onPress={() => {
             this.setState({
             this.setState({