React Native登录后跳转Dashboard失败问题求助

在React Native中实现登录成功后，将token存入AsyncStorage并跳转到Dashboard页面。目前token已成功存入，但跳转失败，报错：

"The action 'NAVIGATE' with payload {} was not handled by any navigator. You need to pass the name of the screen to navigate to."

相关代码如下：

App.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>
  );
};

MainStack #

<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>

Login组件的signIn方法 #

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")
        
      });
};

1. 修复App.js中token状态的异步更新问题 #

AsyncStorage.getItem是异步操作，初始渲染时token变量还是undefined，导致App.js只会渲染AuthStack，登录后也不会自动切换到MainStack。需要用useState和useEffect管理token状态，实现响应式更新：

修改后的App.js：

import { useState, useEffect } from 'react';

const ApplicationNavigator = () => {
  const { Layout, darkMode, NavigationTheme } = useTheme()
  const { colors } = NavigationTheme
  const [token, setToken] = useState(null);

  useEffect(() => {
    const getToken = async () => {
      const value = await AsyncStorage.getItem('token');
      setToken(JSON.parse(value));
      console.log('token is ', JSON.parse(value));
    };
    getToken();
  }, []);

  return (
    <SafeAreaView style={[Layout.fill, { backgroundColor: colors.card }]}>
      <NavigationContainer theme={NavigationTheme} ref={navigationRef}>
        {!token && <AuthStack/>}
        {token && <MainStack/>}
      </NavigationContainer>
    </SafeAreaView>
  )
}

export default ApplicationNavigator

2. 修复登录时的导航跳转逻辑 #

登录时当前处于AuthStack导航器中，而Dashboard属于MainStack，直接调用navigation.navigate("Dashboard")会失败，因为当前导航器没有这个页面。需要在登录成功后触发App.js重新渲染切换到MainStack，同时重置导航栈避免返回登录页：

修改后的Login组件signIn方法：

// 先确保已定义全局导航ref
import { navigationRef } from './App';

const signIn = async () => {
  const body = {
    email: email,
    Password: password
  };
  console.log(body);

  try {
    const response = await fetch("http://testApplication/login", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    });
    const responseJson = await response.json();
    console.log(responseJson);

    // 存入token
    await AsyncStorage.setItem("token", responseJson.token);
    console.log('data stored..');

    // 重新获取token并更新App.js的状态
    const newToken = await AsyncStorage.getItem("token");
    setToken(JSON.parse(newToken)); // 如果Login组件能访问App的token状态，否则用下面的reset方法

    // 用全局导航ref重置到MainStack的Dashboard
    if (navigationRef.isReady()) {
      navigationRef.reset({
        index: 0,
        routes: [{ name: 'Dashboard' }],
      });
    }
  } catch (error) {
    console.error('登录失败:', error);
  }
};

全局导航ref定义（在App.js或单独文件）：

import { createNavigationContainerRef } from '@react-navigation/native';
export const navigationRef = createNavigationContainerRef();

3. 修复AsyncStorage.getItem的异步调用问题 #

原代码中let token = AsyncStorage.getItem("token");会返回Promise而非实际token值，需用await处理，上述修改已包含此修复。

内容的提问来源于stack exchange，提问作者user19614803