Showing
1 changed file
with
92 additions
and
40 deletions
| @@ -4,50 +4,102 @@ | @@ -4,50 +4,102 @@ | ||
| 4 | * @flow | 4 | * @flow |
| 5 | */ | 5 | */ |
| 6 | 6 | ||
| 7 | -import React, { Component } from 'react'; | 7 | +import React, { Component } from "react"; |
| 8 | -import { | 8 | +import { AppRegistry, StyleSheet, Text, View, Image } from "react-native"; |
| 9 | - AppRegistry, | 9 | +import { StackNavigator, TabNavigator } from "react-navigation"; |
| 10 | - StyleSheet, | ||
| 11 | - Text, | ||
| 12 | - View | ||
| 13 | -} from 'react-native'; | ||
| 14 | 10 | ||
| 15 | -export default class ProtectGod extends Component { | 11 | +import Home from "./src/pages/Home/index"; |
| 16 | - render() { | 12 | +import InsuranceCircle from "./src/pages/InsuranceCircle/index"; |
| 17 | - return ( | 13 | +import InsuranceChurch from "./src/pages/InsuranceChurch/index"; |
| 18 | - <View style={styles.container}> | 14 | +import Mine from "./src/pages/Mine/index"; |
| 19 | - <Text style={styles.welcome}> | 15 | +import Login from "./src/pages/Login"; |
| 20 | - Welcome to React Native! | 16 | +import AllProduct from "./src/pages/Home/allProduct"; |
| 21 | - </Text> | 17 | +import CommonWebView from "./src/Components/CommonWebView"; |
| 22 | - <Text style={styles.instructions}> | 18 | +import Details from "./src/pages/InsuranceCircle/details"; |
| 23 | - To get started, edit index.android.js | ||
| 24 | - </Text> | ||
| 25 | - <Text style={styles.instructions}> | ||
| 26 | - Double tap R on your keyboard to reload,{'\n'} | ||
| 27 | - Shake or press menu button for dev menu | ||
| 28 | - </Text> | ||
| 29 | - </View> | ||
| 30 | - ); | ||
| 31 | - } | ||
| 32 | -} | ||
| 33 | 19 | ||
| 34 | -const styles = StyleSheet.create({ | 20 | +// 底部导航栏配置,但也只是作为一个页面,加载到StackNavigator成为第一个页面 |
| 35 | - container: { | 21 | +const MainTabBar = TabNavigator({ |
| 36 | - flex: 1, | 22 | + Home: { |
| 37 | - justifyContent: 'center', | 23 | + screen: Home, |
| 38 | - alignItems: 'center', | 24 | + navigationOptions: { |
| 39 | - backgroundColor: '#F5FCFF', | 25 | + title: "首页", |
| 26 | + tabBarIcon: ({ focused }) => | ||
| 27 | + focused ? ( | ||
| 28 | + <Image source={require("./src/assets/tabbar/ic_home_s.png")} /> | ||
| 29 | + ) : ( | ||
| 30 | + <Image source={require("./src/assets/tabbar/ic_home_n.png")} /> | ||
| 31 | + ) | ||
| 32 | + } | ||
| 40 | }, | 33 | }, |
| 41 | - welcome: { | 34 | + InsuranceCircle: { |
| 42 | - fontSize: 20, | 35 | + screen: InsuranceCircle, |
| 43 | - textAlign: 'center', | 36 | + navigationOptions: { |
| 44 | - margin: 10, | 37 | + title: "保圈", |
| 38 | + tabBarIcon: ({ focused }) => | ||
| 39 | + focused ? ( | ||
| 40 | + <Image source={require("./src/assets/tabbar/ic_circle_s.png")} /> | ||
| 41 | + ) : ( | ||
| 42 | + <Image source={require("./src/assets/tabbar/ic_circle_n.png")} /> | ||
| 43 | + ) | ||
| 44 | + } | ||
| 45 | }, | 45 | }, |
| 46 | - instructions: { | 46 | + InsuranceChurch: { |
| 47 | - textAlign: 'center', | 47 | + screen: InsuranceChurch, |
| 48 | - color: '#333333', | 48 | + navigationOptions: { |
| 49 | - marginBottom: 5, | 49 | + title: "保堂", |
| 50 | + tabBarIcon: ({ focused }) => | ||
| 51 | + focused ? ( | ||
| 52 | + <Image source={require("./src/assets/tabbar/ic_umbrella_s.png")} /> | ||
| 53 | + ) : ( | ||
| 54 | + <Image source={require("./src/assets/tabbar/ic_umbrella_n.png")} /> | ||
| 55 | + ) | ||
| 56 | + } | ||
| 50 | }, | 57 | }, |
| 58 | + Mine: { | ||
| 59 | + screen: Mine, | ||
| 60 | + navigationOptions: { | ||
| 61 | + title: "我的", | ||
| 62 | + tabBarIcon: ({ focused }) => | ||
| 63 | + focused ? ( | ||
| 64 | + <Image source={require("./src/assets/tabbar/ic_mine_s.png")} /> | ||
| 65 | + ) : ( | ||
| 66 | + <Image source={require("./src/assets/tabbar/ic_mine_n.png")} /> | ||
| 67 | + ) | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | +},{ | ||
| 71 | + swipeEnabled: true, | ||
| 72 | + tabBarOptions: { | ||
| 73 | + activeTintColor: "#1B9341" | ||
| 74 | + } | ||
| 51 | }); | 75 | }); |
| 52 | 76 | ||
| 53 | -AppRegistry.registerComponent('ProtectGod', () => ProtectGod); | 77 | +const ProtectGod = StackNavigator( |
| 78 | + { | ||
| 79 | + MainTabBar: { screen: MainTabBar }, | ||
| 80 | + Home: { screen: Home }, | ||
| 81 | + InsuranceCircle: { screen: InsuranceCircle }, | ||
| 82 | + InsuranceChurch: { screen: InsuranceChurch }, | ||
| 83 | + Mine: { screen: Mine }, | ||
| 84 | + Login: { screen: Login }, | ||
| 85 | + AllProduct: { | ||
| 86 | + screen: AllProduct, | ||
| 87 | + navigationOptions: { headerTitle: "全部产品" } | ||
| 88 | + }, | ||
| 89 | + CommonWebView: { screen: CommonWebView }, | ||
| 90 | + Details: { screen: Details } | ||
| 91 | + },{ | ||
| 92 | + navigationOptions: { | ||
| 93 | + // headerTintColor: "blue", | ||
| 94 | + headerStyle: { | ||
| 95 | + backgroundColor: "white" | ||
| 96 | + } | ||
| 97 | + } | ||
| 98 | + } | ||
| 99 | +); | ||
| 100 | + | ||
| 101 | +const styles = StyleSheet.create( | ||
| 102 | + | ||
| 103 | +); | ||
| 104 | + | ||
| 105 | +AppRegistry.registerComponent("ProtectGod", () => ProtectGod); |
-
Please register or login to post a comment