React Native DrawerNavigator与BottomTabNavigator结合使用

1). 创建BottomTabNavigator

/** Tab导航 */
const TabRouter = createBottomTabNavigator({
      Recommend: {
        screen: Recommend,
        navigationOptions: {
          title: '推荐',
          // tabBarVisible: Color.theme,
          tabBarVisible: true,
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          tabBarIcon: ({ tintColor }) => (
            <TabBarItem
              source={require('./../image/xxx.png')}
              tintColor={tintColor}
              width={17}
              height={25}
            />
          )
        }
      },
      Financial: {
        screen: Financial,
        navigationOptions: {
          title: '产品',
          tabBarVisible: true,
          tabBarIcon: ({ tintColor }) => (
            <TabBarItem
              source={require('./../image/xxx.png')}
              tintColor={tintColor}
              width={24}
              height={24}
            />
          )
        }
      },
      Personal: {
        screen: Personal,
        navigationOptions: {
          title: '我的',
          tabBarVisible: true,
          tabBarIcon: ({ tintColor }) => (
            <TabBarItem
              source={require('./../image/xxx.png')}
              tintColor={tintColor}
              width={24}
              height={24}
            />
          )
        }
      }
    }, {
      tabBarPosition: 'bottom',
      swipeEnabled: false,
      animationEnabled: false,
      lazy: true,
      tabBarOptions: {
        allowFontScaling: false,
        activeTintColor: '#ff0000',
        inactiveTintColor: '#0000ff',
        style: { backgroundColor: '#00ff00' },
        activeBackgroundColor: '#ffffff'
      }
    }
);

2). 创建StackNavigator

const StackNavigator = createStackNavigator(
    {
        TabRouter: {
            screen: TabRouter,
        },
        ...Pages // 其余页面
    },
    {
        initialRouteName: 'TabRouter',
        transitionConfig: () => ({
            screenInterpolator: StackViewStyleInterpolator.forHorizontal,
        }),
        cardOverlayEnabled: true,
        defaultNavigationOptions: {
            gesturesEnabled: true,
            headerBackTitle: null,
            headerTitleAllowFontScaling: false,
            headerTitleStyle: {
                // alignItems: 'center',
                color: Color.white,
                paddingTop: 3,
                fontSize: 20,
                // alignSelf: 'center',
                fontWeight: 'normal',
                // 设置标题居中
                // flex: 1,
                // textAlign: 'center'
            },
            headerStyle: {
                elevation: 1,
                backgroundColor: Color.theme,
                shadowOpacity: 0,
                borderBottomWidth: 0,
            },
            headerTintColor: Color.white,
        }
    }
);

3). 创建DrawerNavigator

/** 侧滑栏 */
const CustomDrawerContentComponent = (props) => {
    return (
      <LeftDraw {...props} />
    );
};

// 带有侧滑页的
const DrawerNavigator = createDrawerNavigator(
    {
        // ...TabConfig,
        StackNavigator: { screen: StackNavigator },
    },
    {
        drawerWidth: Screen.width * 0.9, // 展示的宽度
        drawerPosition: 'left', // 抽屉在左边还是右边
        contentComponent: CustomDrawerContentComponent, // 自定义侧滑栏
        // swipeEnabled: false
    }
);

4). 创建应用总的路由栈

// 应用总的路由栈，为的使登录页面包含 push 等方法
const AppNavigator = createStackNavigator({ DrawerNavigator }, {
    defaultNavigationOptions: {
        header: null // 隐藏状态栏
    }
});

export default createAppContainer(AppNavigator);

5). 运行应用即可