使用Expo构建React Native项目时RNSScreenStackHeaderConfig报错求助

我用Expo构建React Native项目时碰到了以下错误，怀疑是@react-navigation/native依赖存在问题，但查阅资料后未找到解决方案，尝试多种方法均无效：

Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

错误调用栈：

位于RNSScreenStackHeaderConfig（由HeaderConfig创建）
位于HeaderConfig（由SceneView创建）
位于RNSScreen（由AnimatedComponent创建）
位于AnimatedComponent
位于AnimatedComponentWrapper（由InnerScreen创建）
位于Suspender（由Freeze创建）
位于Suspense（由Freeze创建）
位于Freeze（由DelayedFreeze创建）
位于DelayedFreeze（由InnerScreen创建）
位于InnerScreen（由Screen创建）
位于Screen（由SceneView创建）
位于SceneView（由NativeStackViewInner创建）
位于Suspender（由Freeze创建）
位于Suspense（由Freeze创建）
位于Freeze（由DelayedFreeze创建）
位于DelayedFreeze（由ScreenStack创建）
位于RNSScreenStack（由ScreenStack创建）
位于ScreenStack（由NativeStackViewInner创建）
位于NativeStackViewInner（由NativeStackView创建）
位于RNCSafeAreaProvider（由SafeAreaProvider创建）
位于SafeAreaProvider（由SafeAreaInsetsContext创建）
位于SafeAreaProviderCompat（由NativeStackView创建）
位于NativeStackView（由NativeStackNavigator创建）
位于PreventRemoveProvider（由NavigationContent创建）
位于NavigationContent
位于Unknown（由NativeStackNavigator创建）
位于NativeStackNavigator（由App创建）
位于EnsureSingleNavigator
位于BaseNavigationContainer
位于ThemeProvider
位于NavigationContainerInner（由App创建）
位于App（由withDevTools(App)创建）
位于withDevTools(App)
位于RCTView（由View创建）
位于View（由AppContainer创建）
位于RCTView（由View创建）
位于View（由AppContainer创建）
位于AppContainer
位于main(RootComponent), js engine: hermes

package.json #

{
"name": "travelguide",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@firebase/app": "^0.9.3",
"@firebase/auth": "^0.21.3",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-firebase/app": "^17.3.1",
"@react-native-firebase/auth": "^17.3.1",
"@react-native-google-signin/google-signin": "^9.0.2",
"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"eas-cli": "^3.7.2",
"expo": "~48.0.4",
"expo-dev-client": "~2.1.4",
"expo-status-bar": "~1.4.4",
"firebase": "^9.17.1",
"link": "^1.5.1",
"react": "18.2.0",
"react-native": "^0.71.3",
"react-native-gesture-handler": "^2.9.0",
"react-native-reanimated": "^3.0.0",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.20.0"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}

App.js #

import { StyleSheet} from "react-native";
import "expo-dev-client";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import LoginScreen from "./src/screens/LoginScreen";
import BottomNavigation from "./src/components/BottomNavigation";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="Login"
          component={LoginScreen}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="BottomNavigation"
          component={BottomNavigation}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

修复步骤 #

1. 降级react-native-screens到Expo 48兼容版本
   Expo 48官方推荐react-native-screens@~3.18.0，当前3.20.0版本存在兼容性问题，执行命令：

   expo install react-native-screens@~3.18.0
   

2. 添加react-native-screens初始化代码
   在App.js最顶部添加导入（放在其他导入之前）：

   import 'react-native-screens';
   

3. 降级react-native-reanimated到兼容版本
   Expo 48推荐react-native-reanimated@~2.14.4，当前3.0.0版本不兼容，执行：

   expo install react-native-reanimated@~2.14.4
   

   同时确保babel.config.js包含Reanimated插件：

   module.exports = function(api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: ['react-native-reanimated/plugin'],
     };
   };
   

4. 清除缓存并重启项目

   expo r -c
   

   安卓模拟器可卸载应用后重新安装，确保缓存完全清除。

5. 重新安装依赖（可选）

   rm -rf node_modules package-lock.json
   npm install
   

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