无法使用反应导航导航到另一个堆栈

Question

当用户使用 navigation.navigate('Auth') 注销时，我正在尝试从屏幕导航（在下面的示例中，'Settings' 屏幕导航到 'Auth'，但我收到错误消息："Do you have a screen named 'Auth'?"

我不明白这里出了什么问题。在 react-navigation 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: Feel free to ignore the token part.

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

when the user signs out using navigation.navigate('Auth')

当用户注销时，您不应该手动 navigate 到 Auth。相反，您应该只删除令牌 (setToken(null))。然后 React Navigation 将自动显示 Auth 屏幕，因为您在令牌为 null.

时定义了它

https://reactnavigation.org/docs/auth-flow

中有更多详细信息

无法使用反应导航导航到另一个堆栈

Unable to navigate to another Stack with react-navigation

react-native

react-navigation

react-navigation-v5