导航OK，跳转页OK，就剩下登录注册模块

罗广聪
Commit 01ae7cdce9d7b538476a67dcd9795bafb6b9bb17 01ae7cdc 1 parent b7dd1cf7
Showing 7 changed files with 130 additions and 149 deletions
index.ios.js
src/Components/CommonWebView.js
src/pages/Home/allProduct.js
src/pages/Home/index.js
src/pages/InsuranceChurch/index.js
src/pages/InsuranceCircle/details.js
src/pages/InsuranceCircle/index.js
--- a/index.ios.js
View file @01ae7cd
+++ b/index.ios.js
View file @01ae7cd
@@ -5,7 +5,7 @@
  */
 import React, { Component } from "react";
-import { AppRegistry, StyleSheet, Text, View } from "react-native";
+import { AppRegistry, StyleSheet, Text, View, Image } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
 import Home from "./src/pages/Home/index";
@@ -13,45 +13,67 @@ import InsuranceCircle from "./src/pages/InsuranceCircle/index";
 import InsuranceChurch from "./src/pages/InsuranceChurch/index";
 import Mine from "./src/pages/Mine/index";
 import Login from "./src/pages/Login";
+import AllProduct from "./src/pages/Home/allProduct";
+import CommonWebView from "./src/Components/CommonWebView";
+import Details from "./src/pages/InsuranceCircle/details";
 const MainTabBar = TabNavigator({
-  Home: { screen: Home, navigationOptions: { title: "首页"} },
+  Home: {
-  InsuranceCircle: { screen: InsuranceCircle },
+    screen: Home,
-  InsuranceChurch: { screen: InsuranceChurch },
+    navigationOptions: {
-  Mine: { screen: Mine }
+      // title: "首页",
-});
+      tabBarIcon: ({ focused }) =>
-
+        focused ? (
-class Main extends Component {
+          <Image source={require("./src/assets/tabbar/ic_home_s.png")} />
-  constructor(props) {
+        ) : (
-    super(props);
+          <Image source={require("./src/assets/tabbar/ic_home_n.png")} />
-    this.state = {
+        )
-      isLoading: false,
+    }
-      isLogin: true
+  },
-    };
+  InsuranceCircle: {
+    screen: InsuranceCircle,
+    navigationOptions: {
+      // title: "首页",
+      tabBarIcon: ({ focused }) =>
+        focused ? (
+          <Image source={require("./src/assets/tabbar/ic_circle_s.png")} />
+        ) : (
+          <Image source={require("./src/assets/tabbar/ic_circle_n.png")} />
+        )
+    }
+  },
+  InsuranceChurch: {
+    screen: InsuranceChurch,
+    navigationOptions: {
+      // title: "首页",
+      tabBarIcon: ({ focused }) =>
+        focused ? (
+          <Image source={require("./src/assets/tabbar/ic_umbrella_s.png")} />
+        ) : (
+          <Image source={require("./src/assets/tabbar/ic_umbrella_n.png")} />
+        )
+    }
+  },
+  Mine: {
+    screen: Mine,
+    navigationOptions: {
+      // title: "首页",
+      tabBarIcon: ({ focused }) =>
+        focused ? (
+          <Image source={require("./src/assets/tabbar/ic_mine_s.png")} />
+        ) : (
+          <Image source={require("./src/assets/tabbar/ic_mine_n.png")} />
+        )
+    }
   }
-  render() {
+},{
-    const { isLogin } = this.state;
+  swipeEnabled: true,
-    return isLogin ? (
+  tabBarOptions: {
-      <MainTabBar />
+    activeTintColor: "#1B9341"
-    ) : (
-      <Login
-        loginSuccess={this.props.loginSuccess}
-        onLogin={this.props.onLogin}
-      />
-    );
   }
-}
-
-const ProtectGod = StackNavigator({
-  Main: { screen: Main },
-  Home: { screen: Home, navigationOptions: { headerTitle: "首页"} },
-  InsuranceCircle: { screen: InsuranceCircle },
-  InsuranceChurch: { screen: InsuranceChurch },
-  Mine: { screen: Mine },
-  Login: { screen: Login }
 });
-// export default class ProtectGod extends Component {
+// class Main extends Component {
 //   constructor(props) {
 //     super(props);
 //     this.state = {
@@ -59,62 +81,56 @@ const ProtectGod = StackNavigator({
 //       isLogin: true
 //     };
 //   }
-//   componentWillMount() {
-//     // console.log("componentWillMount生命周期");
-//     //   var that = this;
-//     // return fetch(`https://devpay.brae.co/test/insurance/login`,{
-//     //   method: "POST",
-//     //   headers: {
-//     //     'Accept': 'application/json',
-//     //     'Content-Type': 'application/json',
-//     //   },
-//     // })
-//     //   .then((resp) => {
-//     //     console.log("测试接口",resp);
-//     //     // return false;
-//     //     if (resp.status === 200) {
-//     //       return resp.json();
-//     //     } else {
-//     //       console.error("something went wrong!");
-//     //     }
-//     //   })
-//     //   .then((respJson) => {
-//     //     if (respJson.enmsg != 'ok') {
-//     //       console.error(err);
-//     //       alert(respJson.cnmsg);
-//     //     } else {
-//     //       that.setState({
-//     //         testData: respJson.data
-//     //       });
-//     //       console.log('state.testData',that.state.testData);
-//     //     }
-//     //   })
-//     //   .catch((err) => console.error(err))
-//   }
-
 //   render() {
-//     console.log("看看这个登录state", this.state.isLogin);
+//     const { isLogin } = this.state;
-//     return this.state.isLoading ? null : (
+
-//       <Main
+//     return isLogin ? (
-//         loginSuccess={this.state.isLogin}
+//       <MainTabBar />
-//         selectedItem={this.state.selectedItem}
+//     ) : (
-//         onLogin={isLogin => {
+//       <Login
-//           this.setState({
+//         loginSuccess={this.props.loginSuccess}
-//             isLogin: isLogin
+//         onLogin={this.props.onLogin}
-//           });
-//         }}
 //       />
 //     );
 //   }
 // }
-const styles = StyleSheet.create({
+const ProtectGod = StackNavigator(
-  container: {
+  {
-    flex: 1,
+    // Main: { screen: Main },
-    justifyContent: "center",
+    MainTabBar: { screen: MainTabBar },
-    alignItems: "center",
+    Home: { screen: Home },
-    backgroundColor: "#F5FCFF"
+    InsuranceCircle: { screen: InsuranceCircle },
+    InsuranceChurch: { screen: InsuranceChurch },
+    Mine: { screen: Mine },
+    Login: { screen: Login },
+    AllProduct: {
+      screen: AllProduct,
+      navigationOptions: { headerTitle: "全部产品" }
+    },
+    CommonWebView: { screen: CommonWebView },
+    Details: { screen: Details }
+  },
+  {
+    navigationOptions: {
+      // 顶部标题颜色
+      // headerTintColor: 'red',
+      // 顶部背景颜色
+      // headerStyle: {backgroundColor: "white"},
+      // headerTitleStyle: {alignSelf: 'center'},
+    }
   }
-});
+);
+
+const styles = StyleSheet.create(
+  {
+    // container: {
+    //   flex: 1,
+    //   justifyContent: "center",
+    //   alignItems: "center",
+    //   backgroundColor: "#F5FCFF"
+    // }
+  }
+);
 AppRegistry.registerComponent("ProtectGod", () => ProtectGod);
--- a/src/Components/CommonWebView.js
View file @01ae7cd
+++ b/src/Components/CommonWebView.js
View file @01ae7cd
@@ -4,17 +4,19 @@ import {
   WebView,
   View,
 } from 'react-native';
+import { StackNavigator, TabNavigator } from 'react-navigation';
+
 export default class CommonWebview extends Component {
   constructor(props) {
     super(props);
   }
   render() {
-    console.log("url",this.props.url)
+    console.log("url",this.props)
     return (
       <WebView
         style={styles.container}
-        source={{uri: this.props.url}}
+        source={{uri: this.props.navigation.state.params.item.url}}
       />
     );
   }
--- a/src/pages/Home/allProduct.js
View file @01ae7cd
+++ b/src/pages/Home/allProduct.js
View file @01ae7cd
@@ -8,9 +8,11 @@ import {
   TouchableOpacity,
   Image
 } from "react-native";
+import { StackNavigator, TabNavigator } from 'react-navigation';
 import CommonWebView from "../../Components/CommonWebView";
 export default class AllProduct extends Component {
+  
   constructor(props) {
     super(props);
     this.state = {
@@ -44,6 +46,7 @@ export default class AllProduct extends Component {
   }
   render() {
+    const { navigate } = this.props.navigation;
     return (
       <View style={styles.container}>
         {/* <NewsList /> */}
@@ -56,14 +59,7 @@ export default class AllProduct extends Component {
               <TouchableOpacity
                 style={styles.itemContainer}
                 key={index}
-                onPress={() => {
+                onPress={() => navigate("CommonWebView", { item: item })}
-                  this.props.navigator.push({
-                    component: CommonWebView,
-                    passProps: {
-                      url: item.url
-                    }
-                  });
-                }}
               >
                 <Image style={styles.itemImgWrapper} source={item.imgurl} />
                 <View style={styles.itemRightWrapper}>
@@ -88,7 +84,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     alignItems: "stretch",
     backgroundColor: "#EFEFEF",
-    paddingTop: 74
   },
   scrollViewContainer: {
     height: 300
--- a/src/pages/Home/index.js
View file @01ae7cd
+++ b/src/pages/Home/index.js
View file @01ae7cd
@@ -8,14 +8,14 @@ import {
   TouchableOpacity,
   ScrollView
 } from "react-native";
-import { StackNavigator, TabNavigator } from 'react-navigation';
+import { StackNavigator, TabNavigator } from "react-navigation";
 import Swiper from "react-native-swiper";
-import AllProduct from "./allProduct";
+// import AllProduct from "./allProduct";
 import CommonWebView from "../../Components/CommonWebView";
 export default class Home extends Component {
   static navigationOptions = {
-    title: '首页',
+    title: "首页"
   };
   constructor(props) {
     super(props);
@@ -79,14 +79,13 @@ export default class Home extends Component {
     console.log("thisprops", this.props);
   }
   _renderMap() {
+    const { navigate } = this.props.navigation;
     return this.state.ListData.map((item, index) => {
       return (
         <TouchableOpacity
           style={styles.itemContainer}
           key={index}
-          onPress={() => {
+          onPress={() => navigate("CommonWebView", { item: item })}
-            this._jumpToWebView(item);
-          }}
         >
           <Image style={styles.itemImgWrapper} source={item.imgurl} />
           <View style={styles.itemRightWrapper}>
@@ -97,22 +96,8 @@ export default class Home extends Component {
       );
     });
   }
-  _jumpToWebView(item) {
-    // console.log("跳转到webview的item",item);
-    this.props.navigator.push({
-      component: CommonWebView,
-      passProps: {
-        url: item.url
-      }
-    });
-  }
-  gotoAllProduct() {
-    this.props.navigator.push({
-      component: AllProduct,
-      title: "全部产品"
-    });
-  }
   _swiper() {
+    const { navigate } = this.props.navigation;
     return (
       <View style={{ height: 120 }}>
         <Swiper
@@ -122,7 +107,7 @@ export default class Home extends Component {
           height={120}
           dotStyle={{
             width: 6,
-            height: 6,
+            height: 6
           }}
           activeDotStyle={{
             width: 6,
@@ -130,15 +115,14 @@ export default class Home extends Component {
           }}
         >
           {this.state.swiperImgList.map((item, index) => {
-            {/* console.log("图片item",item); */}
+            {
+              /* console.log("图片item",item); */
+            }
             return (
               <TouchableOpacity
                 style={styles.slide}
                 key={index}
-                onPress={() => {
+                onPress={() => navigate("CommonWebView", { item: item })}
-                  console.log("我是轮播图")
-                  this._jumpToWebView(item);
-                }}
               >
                 <Image
                   style={styles.slideImg}
@@ -153,16 +137,16 @@ export default class Home extends Component {
     );
   }
   render() {
+    console.log("首页的this.props", this);
     const { navigate } = this.props.navigation;
     return (
       <View style={styles.container}>
-        {/* <Carousel /> */}
         {this._swiper()}
         <TouchableOpacity
           style={styles.midContainer}
-          onPress={() => {
+          onPress={() => 
-            this.gotoAllProduct();
+            navigate("AllProduct")
-          }}
+          }
         >
           <Image
             source={require("../../assets/home/pic.png")}
@@ -237,10 +221,7 @@ const styles = StyleSheet.create({
     // color: "#202020",
   },
   listContainer: {
-    // height: 150
+    flex: 1
-    flex: 1,
-    // paddingBottom: 64,
-    // marginBottom: 49
   },
   itemContainer: {
     height: 90,
@@ -278,7 +259,7 @@ const styles = StyleSheet.create({
     color: "#7A7A7A",
     fontSize: 13,
     marginTop: 10,
-    textAlign: "center",
+    textAlign: "center"
     // marginBottom: 10
   }
 });
--- a/src/pages/InsuranceChurch/index.js
View file @01ae7cd
+++ b/src/pages/InsuranceChurch/index.js
View file @01ae7cd
@@ -49,6 +49,7 @@ export default class InsuranceChurch extends Component {
   }
   render() {
+    const { navigate } = this.props.navigation;
     return (
       <View style={styles.container}>
         <ScrollView
@@ -60,14 +61,7 @@ export default class InsuranceChurch extends Component {
               <TouchableOpacity
                 style={styles.itemContainer}
                 key={index}
-                onPress={() => {
+                onPress={() => navigate("CommonWebView", { item: item })}
-                  this.props.navigator.push({
-                    component: CommonWebView,
-                    passProps: {
-                      url: item.url
-                    }
-                  });
-                }}
               >
                 <Image style={styles.itemImgWrapper} source={item.imgurl} />
                 <View style={styles.itemRightWrapper}>
--- a/src/pages/InsuranceCircle/details.js
View file @01ae7cd
+++ b/src/pages/InsuranceCircle/details.js
View file @01ae7cd
@@ -16,7 +16,7 @@ export default class Details extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      data: this.props.data,
+      data: this.props.navigation.state.params.item,
       text: ""
     };
   }
@@ -138,7 +138,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     alignItems: "stretch",
     backgroundColor: "white",
-    paddingTop: 64
   },
   KAVContainer: {
     flex: 1,
--- a/src/pages/InsuranceCircle/index.js
View file @01ae7cd
+++ b/src/pages/InsuranceCircle/index.js
View file @01ae7cd
@@ -109,6 +109,7 @@ export default class InsuranceCircle extends Component {
   }
   render() {
+    const { navigate } = this.props.navigation;
     return (
       <View style={styles.container}>
         <ScrollView
@@ -120,14 +121,7 @@ export default class InsuranceCircle extends Component {
               <TouchableOpacity
                 style={styles.itemContainer}
                 key={index}
-                onPress={() => {
+                onPress={() => navigate("Details", { item: item })}
-                  this.props.navigator.push({
-                    component: Details,
-                    passProps: {
-                      data: {...item},
-                    },
-                  });
-                }}
               >
                 <Text style={styles.itemTitle} numberOfLines={2}>
                   {item.title}