首页 > 解决方案 > 如何在 React Navigation 中获取 BottomTabNavigator 以显示模态 StackNavigator?

问题描述

我有一个带有几个标签的底部标签导航器。

当用户在某些条件下未登录时,我想导航到作为堆栈导航器的模式屏幕。

如何在不作为选项卡的情况下使用底部选项卡导航器注册导航器?

标签: reactjsreact-nativereact-navigation

解决方案


解决方案

使用带有模态模式的 StackNavigator 包装您的主 BottomTabNavigator 和登录屏幕(StackNavigator)。

例如

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createStackNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
    mode: 'modal',
  }
));

官方将得到帮助。


推荐阅读