kangaroo/js/navigator/AppNavigators.js

import { createAppContainer, createSwitchNavigator } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"
import { createBottomTabNavigator } from 'react-navigation-tabs'
import WelcomePage from "../page/WelcomePage"
import LoginPage from "../page/LoginPage"
import Register from "../page/Register"
import Register1 from "../page/Register1"
import Register2 from "../page/Register2"
import Register3 from "../page/Register3"
import Meet from "../page/Meet"
import ForgetPassWord from "../page/ForgetPassWord"
import UserCard from "../page/UserCard"
import GirlFrienfTerm from "../page/GirlFrienfTerm"
import GiftPay from "../page/GiftPay"
import UserAgree from "../page/UserAgree"
import Suggestion from "../page/Suggestion"
import Setting from "../page/Setting"
import MyInfo from "../page/MyInfo"
import MyGift from "../page/MyGift"
import Attestation from "../page/Attestation/Attestation"
import WaitAttestation from "../page/WaitAttestation"
import AttestationInfo from "../page/AttestationInfo"
import PassMode from "../page/PassMode"
import PassMode1 from "../page/PassMode1"
import CreatPass from "../page/CreatPass"
import GameHome from "../page/GameHome"
import RecommendGamer from "../page/RecommendGamer"
import GamerList from "../page/GamerList"
import GameLead from "../page/GameLead"

import MainPage from "../page/MainPage"
import MessagePage from "../page/MessagePage"
import Entypo from "react-native-vector-icons/Entypo"
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"
import AntDesign from "react-native-vector-icons/AntDesign"
import React from "react"
import { Text, TouchableOpacity } from "react-native"
const InitNavigator = createStackNavigator({
    LoginPage: {
        screen: LoginPage,
        navigationOptions: {
            header: null
        }
    },
    WelcomePage: {
        screen: WelcomePage,
        navigationOptions: {
            header: null
        }
    }
})
const BottomTabNavigator = createBottomTabNavigator(
    {//在这里配置页面的路由
        MainPage: {
            screen: MainPage,
            navigationOptions: {
                tabBarLabel: "主页",
                tabBarIcon: ({ tintColor, focused }) => (
                    <MaterialCommunityIcons
                        name={"home-heart"}
                        size={30}
                        style={{ color: tintColor }}
                    />
                )
            }
        },
        MessagePage: {
            screen: MessagePage,
            navigationOptions: {
                tabBarLabel: "消息",
                tabBarIcon: ({ tintColor, focused }) => (
                    <AntDesign
                        name={"message1"}
                        size={26}
                        style={{ color: tintColor }}
                    />
                )
            }
        },
        GamePage: {
            screen: GameHome,
            navigationOptions: {
                tabBarLabel: "游戏",
                tabBarIcon: ({ tintColor, focused }) => (
                    <Entypo
                        name={"game-controller"}
                        size={26}
                        style={{ color: tintColor }}
                    />
                )
            }
        },
        MyPage: {
            screen: UserCard,
            navigationOptions: {
                tabBarLabel: "我的",
                tabBarIcon: ({ tintColor, focused }) => (
                    <AntDesign
                        name={"smileo"}
                        size={26}
                        style={{ color: tintColor }}
                    />
                )
            }
        }

    }, {
    initialRouteName: "", // 设置默认的页面
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? '#FA788A' : '#fff',
        style: {
            paddingTop: 10,
            paddingBottom: 10,
            height: 60
        },
        labelStyle: {
            marginTop: 6,
            marginBottom: 6
        },// 文字的样式
    },

    lazy: true, // 是否在app打开的时候将底部标签栏全部加载
    backBehavior: null, // 点击返回退到上级界面

}
);

const MainNavigator = createStackNavigator({
    GameLead: {
        screen: GameLead,
        navigationOptions: {
            header: null
        }
    },
    BottomTabNavigator: {
        screen: BottomTabNavigator,
        navigationOptions: {
            title: '底部导航器',
            headerShown: false
        }
    },
    GamerList: {
        screen: GamerList,
        navigationOptions: {
            headerTitle: "选择关卡",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    RecommendGamer: {
        screen: RecommendGamer,
        navigationOptions: ({ navigation }) => (
            {
                headerTitle: "推荐关主",
                headerTintColor: "#fff",
                headerBackTitleStyle: {
                    color: "#fff"
                },
                headerStyle: {
                    backgroundColor: '#FA788A',
                    color: '#fff',
                },
                headerTitleStyle: {
                    color: '#fff',
                },
                headerRight: <TouchableOpacity onPress={() => navigation.navigate("CreatPass")}>
                    <Text style={{ fontSize: 15, color: "#FF4A6C", marginRight: 10 }}>创建关卡</Text>
                </TouchableOpacity>
            }
        )
    },
    GameHome: {
        screen: GameHome,
        navigationOptions: {
            headerTitle: "游戏大厅",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    CreatPass: {
        screen: CreatPass,
        navigationOptions: {
            headerTitle: "创建关卡",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    PassMode1: {
        screen: PassMode1,
        navigationOptions: {
            headerTitle: "闯关模式",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    PassMode: {
        screen: PassMode,
        navigationOptions: {
            headerTitle: "闯关模式",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    Attestation: {
        screen: Attestation,
        navigationOptions: {
            headerTitle: "认证",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    AttestationInfo: {
        screen: AttestationInfo,
        navigationOptions: {
            headerTitle: "实名认证",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    WaitAttestation: {
        screen: WaitAttestation,
        navigationOptions: {
            headerTitle: "实名认证",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    MyGift: {
        screen: MyGift,
        navigationOptions: {
            headerTitle: "我的礼物",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    MyInfo: {
        screen: MyInfo,
        navigationOptions: {
            headerTitle: "我的资料",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    Setting: {
        screen: Setting,
        navigationOptions: {
            headerTitle: "设置",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    Suggestion: {
        screen: Suggestion,
        navigationOptions: {
            headerTitle: "意见反馈",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    UserAgree: {
        screen: UserAgree,
        navigationOptions: {
            headerTitle: "用户协议",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    GiftPay: {
        screen: GiftPay,
        navigationOptions: {
            headerTitle: "收银台",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    GirlFrienfTerm: {
        screen: GirlFrienfTerm,
        navigationOptions: {
            headerTitle: "择偶条件",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    UserCard: {
        screen: UserCard,
        navigationOptions: {
            header: null
        }
    },
    Meet: {
        screen: Meet,
        navigationOptions: {
            headerTitle: "偶遇",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    Register3: {
        screen: Register3,
        navigationOptions: {
            headerTitle: "完善资料",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    Register2: {
        screen: Register2,
        navigationOptions: {
            headerTitle: "完善资料",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    Register1: {
        screen: Register1,
        navigationOptions: {
            headerTitle: "完善资料",
            headerTintColor: "#fff",
            headerBackTitleStyle: {
                color: "#fff"
            },
            headerStyle: {
                backgroundColor: '#FA788A',
                color: '#fff',
            },
            headerTitleStyle: {
                color: '#fff',
            },
        }
    },
    ForgetPassWord: {
        screen: ForgetPassWord,
        navigationOptions: {
            header: null
        }
    },
    Register: {
        screen: Register,
        navigationOptions: {
            header: null
        }
    },
})
export default createAppContainer(createSwitchNavigator({
    Init: InitNavigator,
    Main: MainNavigator
},
    {
        navigationOptions: {
            header: null
        }
    }
))