React Native中如何跨栈跳转并向目标屏幕传递参数

错误原因 #

你的AuthStack和AppStack是两个完全独立的导航栈，登录页处于AuthStack中。当用户登录成功后，Routes组件会根据AuthContext的状态直接替换整个导航栈（卸载AuthStack，挂载AppStack），此时登录页调用的navigation.navigate无法找到AppStack内的导航器，因此抛出“navigation was not handled by any navigator”错误。

同时，你希望进入userHomeScreen时直接显示API数据，当前仅重新渲染后显示的问题，本质是初始加载时数据未就绪，最佳解决方案是通过状态管理共享数据，而非导航参数传递。

推荐解决方案：利用AuthContext共享API数据 #

你的应用已经在使用AuthContext管理用户登录状态，直接扩展Context存储API数据是最适配现有架构的方案：

1. 扩展AuthContext，添加API数据状态 #

// AuthContext.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isOnboarded, setIsOnboarded] = useState(false);
  const [initializing, setInitializing] = useState(true);
  // 新增存储用户API数据的状态
  const [userProfile, setUserProfile] = useState(null);

  // 新增更新用户API数据的方法
  const updateUserProfile = (profileData) => {
    setUserProfile(profileData);
  };

  // 原有初始化逻辑（比如从本地存储读取状态）

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        isOnboarded,
        setIsOnboarded,
        initializing,
        userProfile,
        updateUserProfile
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

2. 登录页调用API并更新Context #

// LoginScreen.js
import { useAuth } from '../path/to/AuthContext';

const LoginScreen = () => {
  const { setUser, updateUserProfile } = useAuth();

  const handleLogin = async (credentials) => {
    // 执行登录请求
    const loginRes = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });
    const loginData = await loginRes.json();
    setUser(loginData.user);

    // 调用获取用户信息的API
    const profileRes = await fetch(`/api/user/${loginData.user.id}`);
    const profileData = await profileRes.json();
    // 更新Context中的用户数据
    updateUserProfile(profileData);

    // 无需手动导航，Routes会自动切换到AppStack
  };

  // 其他登录UI逻辑
};

3. userHomeScreen从Context读取数据 #

// UserHome.js
import { useAuth } from '../path/to/AuthContext';
import { ActivityIndicator, Text, View } from 'react-native';

const UserHome = () => {
  const { userProfile } = useAuth();

  // 数据未加载时显示加载状态
  if (!userProfile) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#8252ff" />
      </View>
    );
  }

  // 直接渲染API数据
  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text>欢迎回来，{userProfile.user_nm}！</Text>
      {/* 其他用户信息渲染 */}
    </View>
  );
};

备选方案：通过导航重置传递参数（不推荐） #

如果坚持使用导航参数传递，需要调整路由结构，将AuthStack和AppStack放入同一个根导航栈，再用CommonActions.reset重置路由并传递参数：

1. 修改Routes组件 #

// Routes.js
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

const Routes = () => {
  const { user, isOnboarded, initializing } = useContext(AuthContext);

  if (initializing) return null;

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {user ? (
          isOnboarded ? (
            <Stack.Screen name="AppStack" component={AppStack} />
          ) : (
            <Stack.Screen name="RegistrationStack" component={RegistrationStack} />
          )
        ) : (
          <Stack.Screen name="AuthStack" component={AuthStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

2. 登录页执行路由重置并传递参数 #

// LoginScreen.js
import { CommonActions } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';

const LoginScreen = () => {
  const navigation = useNavigation();

  const handleLogin = async () => {
    // 登录+获取API数据逻辑
    const userProfile = await fetchUserProfileAPI(...);

    // 重置路由到AppStack的userHomeScreen并传递参数
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [
          {
            name: 'AppStack',
            state: {
              routes: [
                {
                  name: 'Home',
                  state: {
                    routes: [
                      {
                        name: 'userHomeScreen',
                        params: { user: userProfile.user_nm },
                      },
                    ],
                  },
                },
              ],
            },
          },
        ],
      })
    );
  };
};

3. userHomeScreen接收参数 #

// UserHome.js
const UserHome = ({ route }) => {
  const { user } = route.params || {};

  if (!user) {
    return <ActivityIndicator />;
  }

  return <Text>欢迎回来，{user}！</Text>;
};

方案对比 #

• 推荐方案一：利用Context共享数据，符合React状态管理最佳实践，数据可在整个AppStack中复用，无需处理复杂的导航层级参数传递，代码更简洁易维护。
• 备选方案：仅适合临时场景，导航层级嵌套复杂，参数传递容易出错，且数据无法在其他屏幕共享。

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