升级React Native及React Navigation后iOS端出现SafeAreaProviderCompat错误求助

问题描述 #

将 React Native 升级至 0.70.5，同时把 @react-navigation/native 升级到 6.0.13、@react-navigation/native-stack 升级到 6.9.1 后，iOS 项目运行出现以下错误：

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[13], "@react-navigation/elements").SafeAreaProviderCompat')
Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run yarn or npm install.
Error: Requiring module "node_modules/@react-navigation/elements/src/index.tsx", which threw an exception: Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run yarn or npm install.

已尝试清理项目、重装依赖、删除 node_modules/Pods/构建文件、重装 react-native-screens@3.18.2 和 react-native-safe-area-context@4.4.1，但问题仍存在。

解决方案 #

1. 安装适配版本的 @react-navigation/elements #

SafeAreaProviderCompat 属于 @react-navigation/elements 包，当前导航版本和该包版本不匹配会导致异常，执行以下命令安装兼容版本：

# 使用 npm
npm install @react-navigation/elements@^1.3.17

# 使用 yarn
yarn add @react-navigation/elements@^1.3.17

2. 彻底清除 Metro 缓存 #

缓存残留可能导致模块引用错乱，重启 Metro 时强制清除缓存：

# 使用 npm
npm start -- --reset-cache

# 使用 yarn
yarn start --reset-cache

3. 重新安装 iOS Pods #

确保 iOS 端依赖正确链接：

cd ios
pod deintegrate
pod install
cd ..

4. 替换为原生 SafeAreaProvider #

如果上述操作无效，可直接使用 react-native-safe-area-context 提供的 SafeAreaProvider 替代 SafeAreaProviderCompat：

// 替换原有导入
import { SafeAreaProvider } from 'react-native-safe-area-context';

// 在根组件中使用
export default function App() {
  return (
    <SafeAreaProvider>
      {/* 导航容器及其他业务组件 */}
    </SafeAreaProvider>
  );
}

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