无法在 SwitchNavigator 中导航

Question

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

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

});
export default createAppContainer(App);

加载屏幕只是一个返回空白视图的屏幕，并包含登录检查以导航到身份验证或Appstack，现在检查后我可以成功导航到任一堆栈，但我无法从某些堆栈导航到其他堆栈，例如我从加载屏幕导航到身份验证屏幕n现在登录后我想从身份验证堆栈移动到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

My 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')

它给了我这个错误：错误图像 知道我可能做错了什么吗？

Answer 1

我认为您收到错误，因为您混合了两个版本的反应导航 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。

你必须与三元有关，因为反应导航 5 没有 switchNavigator。

希望对您有所帮助!!

如果有任何问题，请告诉我!!