您需要创建动态路由,并创建一个组件,该组件根据用户是否登录来呈现选项卡。在
Tabs.js执行以下操作。
const loginRoutes = { Home: { screen: Home, navigationOptions: { title: 'Home', }, }, Browse: { screen: Browse, navigationOptions: { title: 'Browse', }, }, Search: { screen: Search, navigationOptions: { title: 'Search', }, }, Radio: { screen: Radio, navigationOptions: { title: 'Radio', }, }, Library: { screen: Library, navigationOptions: { title: 'Library', }, },}const noLoginRoutes = { Home: { screen: Home, navigationOptions: { title: 'Home', }, }, Browse: { screen: Browse, navigationOptions: { title: 'Browse', }, }, Search: { screen: Search, navigationOptions: { title: 'Search', }, }, Radio: { screen: Radio, navigationOptions: { title: 'Radio', }, }}const mapStateToProps = state => { return { isLogin: state.user.isLogin, };}; const AppNav = ({ isLogin }) => { const Container = createAppContainer( createDrawerNavigator( { ...drawerRoutes, App: createStackNavigator( { ...routes, Tabs: createBottomTabNavigator( isLogin ? loginRoutes : noLoginRoutes ), }, routesConfig ), }, drawerConfig ) ); return <Container />;};export default connect(mapStateToProps)(AppNav);演示



