从一个导航器中的屏幕导航到另一个导航器中的屏幕

Question

我正在使用 react-navigation v5.

在我的应用程序中。我有两个导航器，一个堆栈导航器一个抽屉导航器：

const LoginStack = createStackNavigator();
const Drawer = createDrawerNavigator();

我根据登录状态显示其中一个：

{state.loggedIn? (
        <LoginStack.Navigator
          ...>
          <LoginStack.Screen
            name='login'
            component={LoginScreen}
          />
          <LoginStack.Screen
            name='register'
            component={RegisterScreen}
          />
        </LoginStack.Navigator>
      ) : (
        <>
          <Drawer.Navigator
            initialRouteName={Landing}
            drawerContent={props => <MyDrawerContent {...props} />}
           >
            <Drawer.Screen name="landing" component={LandingScreen} />
            ...
          </Drawer.Navigator>
        </>
      )}

正如您在上面看到的，如果用户未登录，我会显示 LoginStack 导航器，否则我会显示 Drawer 导航器。如果您仔细查看 Drawer.Navigator 部分，我已经声明了我自己的抽屉内容 MyDrawerContent.

在 MyDrawerContent 中，我有一个注销按钮。我想将用户导航到 LoginStack 的 LoginScreen。我试过了：

<Button title="Logout" onPress={() => props.navigation.navigate('login')}/>

但我收到错误：The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.。是因为我正在导航到 MyDrawerContent 不属于的另一个导航器的屏幕吗？如何解决？

Answer 1

由于您创建了两个完全独立的导航树，您无法在它们之间导航，因为 login 屏幕未注册，因此在您处于 Drawer.Navigator.[=15 时不可用=]

但是，您真正想要在注销按钮 onPress 中做的是将 loggedIn 状态更改为 false。这将重新呈现主要应用程序组件并呈现 LoginStack 。目前还不是很清楚如何将 state 传递到组件树下，因此我无法提供具体的代码示例，但希望您能理解。

从一个导航器中的屏幕导航到另一个导航器中的屏幕

Navigate from a screen in one navigator to a screen in another navigator

react-native

react-navigation

react-navigation-v5