react native开发Android 篇——createStackNavigator、createBottomTabNavigator和createDrawerNavigator混合使用

官网地址：https://reactnavigation.org/docs/zh-Hans/getting-started.html
demo倒数日github地址：https://github.com/liyamei123/DaysMatter
demo倒数日的路由是createStackNavigator、createBottomTabNavigator和createDrawerNavigator的混合使用，标题栏是沉浸式的，文件路径是src下的route.js。
注意：
createStackNavigator改为从react-navigation-stack引入，使用时必须安装react-navigation-stack
createBottomTabNavigator改为从 react-navigation-tabs，使用时必须安装react-navigation-tabs和react-native-reanimated

1. 先创建BottomTabNavigator

   const TabNavigator = createBottomTabNavigator(
       {
           Days: createStackNavigator(
               {
                   Days: {
                       screen: Days,
                       navigationOptions:({ navigation, screenProps }) =>  {
                           return {
                               title: '倒数日',
                               headerStyle: {
                                   backgroundColor: 'rgba(255,255,255,0.5)',
                                   height: screenProps.height,
                                   paddingTop: screenProps.paddingTop
                               },
                               headerTintColor: '#666',
                               headerTitleStyle: {
                                   fontWeight: 'bold',
                               },
                               headerTransparent: true,
                           }
                       }
                   },
                   //不传参的写法
                   /*Days: {
                       screen: Days,
                       navigationOptions:{
                           title: '倒数日',
                               headerStyle: {
                                   backgroundColor: 'rgba(255,255,255,0.5)',
                                   height: height,
                                   paddingTop: paddingTop
                               },
                               headerTintColor: '#666',
                               headerTitleStyle: {
                                   fontWeight: 'bold',
                               },
                               headerTransparent: true,
                       }
                   },*/
               }
           ),
           History: createStackNavigator(
               {
                   History: {
                       screen: History,
                       navigationOptions:({ navigation, screenProps }) =>   {
                           return{
                               title: '历史上的今天',
                               headerStyle: {
                                   backgroundColor: 'rgba(255,255,255,0.5)',
                                   height: screenProps.height,
                                   paddingTop: screenProps.paddingTop
                               },
                               headerTintColor: '#666',
                               headerTitleStyle: {
                                   fontWeight: 'bold',
                               },
                               headerTransparent: true
                           }
                       }
                   }
               }
           ),
           Setting: createStackNavigator(
               {
                   Setting: {
                       screen: Setting,
                       navigationOptions:({ navigation, screenProps }) =>   {
                           return{
                               title: '设置',
                               headerStyle: {
                                   backgroundColor: screenProps.themeColor,
                                   height: screenProps.height,
                                   paddingTop: screenProps.paddingTop
                               },
                               headerTintColor: '#ffffff',
                               headerTitleStyle: {
                                   fontWeight: 'bold',
                               },
                               headerTransparent: false
                           }
                       }
                   }
               }
           )
       },
       {
           defaultNavigationOptions: ({ navigation }) => (
               {
                   tabBarIcon: ({ focused, tintColor }) =>
                       getTabBarIcon(navigation, focused, tintColor),
               }
           ),
           tabBarOptions: {
               activeTintColor: '#666666',
               inactiveTintColor: '#999999',
               style: {
                   backgroundColor:'rgba(0,0,0,0)',
               },
           },
       }
   );
   

2. BottomTabNavigator的图标

   import FontAwesome from 'react-native-vector-icons/FontAwesome';//字体图标
   import AntDesign from 'react-native-vector-icons/AntDesign';//字体图标
   const getTabBarIcon = (navigation, focused, tintColor) => {
       const { routeName } = navigation.state;
       let IconComponent = FontAwesome;
       let iconName;
       if (routeName === 'Days') {
           iconName = 'calendar';
       } else if (routeName === 'History') {
           iconName = 'history';
       }else if(routeName === 'Setting'){
           IconComponent=AntDesign;
           iconName = 'setting';
       }
       return <IconComponent name={iconName} size={25} color={tintColor} />;
   };
   

3. 创建全局导航器createStackNavigator

   const StackNavigator = createStackNavigator(
       {
           bottomTabNavigator: {
               screen: TabNavigator,
               navigationOptions: {
                   header: null,
               }
           },
           AddDay: {
               screen: AddDay,
           },
           PastDayDetail: {
               screen: PastDayDetail,
           },
           BackGround: {
               screen: BackGround,
           },
       },
       {
           initialRouteName: "bottomTabNavigator",
           defaultNavigationOptions:({ navigation, screenProps }) => {
               return{
                   headerStyle: {
                       backgroundColor: screenProps.themeColor,
                       height: screenProps.height,
                       paddingTop: screenProps.paddingTop
                   },
                   headerTintColor: '#ffffff',
                   headerTitleStyle: {
                       fontWeight: 'bold',
                   },
               }
           }
       }
   )
   

4. createDrawerNavigator

   const DrawerNavigator = createDrawerNavigator(
       {
           StackNavigator: { 
               screen: StackNavigator
           },
       },
       {
           drawerPosition: 'left', // 抽屉在左边还是右边
           contentComponent: Menu, // Menu是自定义侧滑栏
       },
   );
   

   5.createAppContainer

   const AppContainer = createAppContainer(DrawerNavigator);