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内，我有一个注销按钮。我想将用户导航到LoginScreen的{{1}}。我尝试过：

LoginStack

但是我收到错误：<Button title="Logout" onPress={() => props.navigation.navigate('login')}/>。是因为我导航到The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.不属于的另一个导航器的屏幕吗？如何解决？

Answer 1

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

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

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

1 个答案: