如何在不同堆栈之间导航

Question

在我的App.tsx文件中，我有三个堆栈，如下所示：

const AuthStack = createStackNavigator()
const AuthStackScreen = () => (
<AuthStack.Navigator>
<AuthStack.Screen name="Login" component={Login} options={{headerShown:false}}/>
</AuthStack.Navigator>
)
export const HomeStack = createStackNavigator()
export const HomeStackScreen = () => (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} options={{headerShown:false}}/>
<HomeStack.Screen name="TestScreen" component={TestScreen} />
</HomeStack.Navigator>
)
const RootStack = createStackNavigator()
const RootStackScreen = ({ isTokenValid }) => (
<RootStack.Navigator headerMode="none">
{ isTokenValid 
? ( <RootStack.Screen name="App" component={HomeStackScreen} options={{headerShown:false}}/> ) 
: ( <RootStack.Screen name="Auth" component={AuthStackScreen} options={{headerShown:false}}/> ) 
}
</RootStack.Navigator>
)

然后我返回以下内容：

return (
<NavigationContainer>
<RootStackScreen isTokenValid={props.isTokenValid}/>
</NavigationContainer>
);

在成功登录后的Login.tsx中，我想导航到HomeStackScreen下的HomeScreen，所以我调用navigation.navigate如下：

const doLogin = ()=>{
issueToken(phoneNumber,otp).then(res => { 
navigation.navigate('HomeStackScreen', { screen: 'Root' });
}).catch(err => alert(err));
}

但是导航失败，显示以下消息：

The action 'NAVIGATE' with payload {"name":"HomeStackScreen","params":{"screen":"Root"}} was not handled by any navigator.

如何在两个堆栈之间正确导航？

Answer 1

您的RootStack只返回单个堆栈HomeStackScreen或AuthStackScreen，一次只返回其中一个。在您的情况下，您处于AuthStackScreen，这意味着HomeStackScreen不会渲染。这就是为什么您无法导航到HomeStackScreen。

为了切换到HomeStackScreen，我认为你需要更新isTokenValid，我不知道你如何配置它，但你可以使用redux或context。

这可能有助于：https://stackoverflow.com/a/61861273/1451753