使用导航在React Native中登录后重定向

Question

嗨，我正试图在成功登录后通过将令牌设置为asyncStorage来导航到仪表板屏幕，我可以在asyncStorage中设置令牌，但在成功登录之后无法导航到仪表盘，我需要在代码中修改任何内容

应用程序。JS：

const ApplicationNavigator = () => {
const { Layout, darkMode, NavigationTheme } = useTheme()
const { colors } = NavigationTheme
console.log("app.js")
let token;
AsyncStorage.getItem('token')
.then((value) => {
token = JSON.parse(value);
console.log('token is ', token);
});
return (
<SafeAreaView style={[Layout.fill, { backgroundColor: colors.card }]}>
<NavigationContainer theme={NavigationTheme} ref={navigationRef}>
{!token && <AuthStack/>}
{token && <MainStack/>}
</NavigationContainer>
</SafeAreaView>
)
}
export default ApplicationNavigator

我的AuthStack:const AuthStack=((=>｛

return (
<Stack.Navigator
initialRouteName="LoginScreen"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="LoginScreen" component={LoginScreen} />
</Stack.Navigator>
);
};

主堆栈：

<Tab.Navigator >
<Tab.Screen name='Dashboard' component={Dashboard} />
<Tab.Screen name='My Tasks' component={MyTaskStack} />
<Tab.Screen name='Job Openings' component={JobOpeningsStack} />
<Tab.Screen name='Candidates' component={CandidateStack} />
</Tab.Navigator>

并登录：

const signIn = () => {
let body={
email:email,
Password:password
}
console.log(body)
fetch("http://testApplication/login", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(body),
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson)

AsyncStorage.setItem("token", responseJson.token)
.then(() => {
console.log('data stored..');
});
let token =  AsyncStorage.getItem("token");
console.log(token)

navigation.navigate("Dashboard")

});
};

我能够登录并得到以下错误：任何导航器都未处理有效负载为｛｝的操作"NAVIGATE"。您需要传递要导航到的屏幕名称。

我试图将导航导航("Dashboard"(更改为-->navigation.导航(｛key:Dashboard｝(；为此，我也得到了相同的错误

Answer 1

在有条件地渲染屏幕时不要手动导航，而是倾听token中的更改，导航将自动发生在正确的屏幕上。

例如，包装AsyncStorage以侦听更改，有关更多信息，请参阅添加事件侦听器功能。

有关如何实现此类流的详细信息，请参阅身份验证流。