无法在 React-native 的 SwitchNavigator 中导航

Question

我的项目中有 Switch-Navigator，它包含三个项目：

const App = createSwitchNavigator({
  Splash: LoadingScreen,
  Auth: AuthStack,
  AppStack: Drawer


});
export default createAppContainer(App);

加载屏幕只是一个 returns 空白视图的屏幕，包含用于导航到 Auth 或 Appstack 的登录检查，现在检查后我可以成功导航到任一堆栈，但我无法从某些堆栈导航其他例如，我现在在登录后从加载屏幕导航到 Auth 屏幕，我想从 Auth Stack 移动到 AppStack，但它给了我错误。

const AuthScreens = ({ navigation }) => (
    <Stack.Navigator>
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={{
                headerShown: false,
                headerTransparent: true,
                gestureEnabled: false,
            }}
        />

        <Stack.Screen
            name="ResetPwd"
            component={ResetPwd}
            gestureEnable={true}
            options={{
                headerShown: false,
                headerTransparent: true,
                gestureEnabled: true,
            }}
        />
    </Stack.Navigator>
);
export default AuthScreens

我的 AppStack 有抽屉，它进一步膨胀了 AppStack

const DrawerNavigator = () => (
    <Drawer.Navigator
        ...
        <Drawer.Screen name="Home" component={AppStack} />
    </Drawer.Navigator>
);
export default DrawerNavigator

应用程序堆栈：

const StackScreens = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="FeedbackAndWorkingScreen"
      component={FeedbackAndWorkingScreen}
      gestureEnable={true}
      options={{
        headerShown: false,
        headerTransparent: true,
        gestureEnabled: true,
      }}
    />
  ...
 </Stack.Navigator>
);
export default StackScreens

当我

props.navigation.navigate('AppStack')
props.navigation.navigate('Auth')

两者都很好，但是当我尝试从每个堆栈导航到另一个堆栈时

props.navigation.navigate('AppStack')

它给我这个错误：Error Image 知道我做错了什么吗？

Answer 1

我认为您遇到了错误，因为您混合了两个版本的 React Navigation 4 和 5。导致错误的是

const App = createSwitchNavigator({
Splash: LoadingScreen,
Auth: AuthStack,
AppStack: Drawer
});
export default createAppContainer(App);

你需要这样改：-

function App(){
return(
<Stack.Navigator>
{this.state.isLogin ? 
 <Stack.Screen name='AppStack' component={DrawerNavigator} //after   login
: 
 <Stack.Screen name='Auth' component={AuthScreen}  //before login
}
 </Stack.Navigator>
)
}

登录成功时将 isLogin 的状态更改为 true，注销时更改为 false。

你必须使用三元，因为 react navigation 5 没有 switchNavigator。

希望对您有所帮助！！！

如果有任何问题请告诉我！！！

无法在 React-native 的 SwitchNavigator 中导航

Can't navigate in SwitchNavigator in React-native

navigation

react-native

react-navigation