无法通过react-navigation导航到另一个Stack

Question

当用户使用navigation.navigate('Auth')退出时，我试图从一个屏幕导航（在下面的示例中，从“设置”屏幕导航到“身份验证”），但出现错误：“您有一个名为“身份验证”的屏幕吗？ “

我不明白这里出了什么问题。在反应导航4中，这是可能的。

PS：随意忽略令牌部分。

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

import AsyncStorage from '@react-native-community/async-storage';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import Login from './src/screens/Login'
import Register from './src/screens/Register'
import Welcome from './src/screens/Welcome'
import Map from './src/screens/Map'
import Shop from './src/screens/Shop'
import OfferConfirmation from './src/screens/OfferConfirmation'
import Settings from './src/screens/Settings'



const AuthStack = createStackNavigator()
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen name="Login" component={Login} />
    <AuthStack.Screen name="Register" component={Register} />
  </AuthStack.Navigator>
)

const MainStack = createStackNavigator()
const MainStackScreen = () => (
  <MainStack.Navigator>
    <MainStack.Screen
      name="Map" component={Map}
    />
    <MainStack.Screen name="Shop" component={Shop} />
    <MainStack.Screen name="OfferConfirmation" component={OfferConfirmation} />
    <MainStack.Screen name="Settings" component={Settings} />
  </MainStack.Navigator>
)

const Stack = createStackNavigator();

export default () => {

  const [token, setToken] = useState(null)

  return (
   <NavigationContainer>
    <Stack.Navigator>

      {token ?
        <Stack.Screen name="Main" component={MainStackScreen} />
      :
        <Stack.Screen name="Auth" component={AuthStackScreen} />
      }

    </Stack.Navigator>
   </NavigationContainer>
  );
};

Answer 1

PS：随意忽略令牌部分。

这是重要的部分。当存在令牌时，您要定义Main屏幕，在不存在令牌时，您要定义Auth屏幕。如果存在令牌，则只有一个名为Main的屏幕，没有定义的Auth屏幕。因此，您无法导航到它。同样，当不存在令牌时，只有Auth屏幕，因此您无法导航到Main。

当用户使用navigation.navigate('Auth')退出时

[用户退出时，您不应手动将navigate至Auth。相反，您应该只删除令牌（setToken(null)）。然后，React Navigation将自动显示Auth屏幕，因为您已在令牌为null时定义了它。

https://reactnavigation.org/docs/auth-flow中的更多详细信息