React Native 0.74.1升级后React Navigation栈导航屏幕未定义报错

核心原因 #

RN 0.74.x引入了底层API变更，旧版本的react-navigation-stack（6.3.17）存在兼容性问题，导致屏幕组件无法正确加载，必须升级导航相关依赖到兼容版本。

分步解决方案 #

1. 升级所有react-navigation相关依赖 #

执行命令更新核心导航包及依赖的原生模块：

• 使用npm：

  npm update @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
  

• 使用yarn：

  yarn upgrade @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
  

注意：react-native-screens和react-native-safe-area-context是导航库的核心依赖，必须同步升级到兼容RN 0.74的版本。

2. 清理缓存并重新安装依赖 #

升级后易出现缓存冲突，执行以下步骤：

• 删除旧依赖文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装依赖：

  npm install # 或 yarn install
  

• 重置Metro缓存：

  npx react-native start --reset-cache
  

3. 检查屏幕组件的导出方式 #

确保导航配置中引用的屏幕组件导出方式正确：

• 默认导出场景：

  // HomeScreen.js
  export default function HomeScreen() { /* ... */ }
  
  // 导航配置直接引用
  <Stack.Screen name="Home" component={HomeScreen} />
  

• 命名导出场景：

  // HomeScreen.js
  export function HomeScreen() { /* ... */ }
  
  // 导航配置需明确指定
  <Stack.Screen name="Home" component={() => import('./HomeScreen').then(m => m.HomeScreen)} />
  

4. 验证导航容器配置 #

确认NavigationContainer正确包裹栈导航器，无嵌套错误：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* 其他屏幕配置 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

5. 排查TypeScript类型问题 #

如果使用TypeScript：

• 确保@types/react、@types/react-native版本与RN 0.74兼容
• 检查栈导航的参数类型声明是否正确，例如：

  type RootStackParamList = {
    Home: undefined;
    Details: { itemId: number };
  };
  
  const Stack = createStackNavigator<RootStackParamList>();
  

补充说明 #

若升级后仍有问题，可清理原生构建缓存：

• iOS：删除ios/Pods目录和ios/Podfile.lock，执行pod install
• Android：删除android/.gradle目录，重新执行./gradlew clean

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