React Navigation v6中usePreventRemoveContext未定义错误求助

问题详情 #

通过npx react-native init创建项目后，仅修改App.js并在MainActivity.java中添加React Navigation v6所需的onCreate函数，基础页面可正常运行，但添加导航后触发如下错误：

TypeError: (0, _$$_REQUIRE(_dependencyMap[1], "@react-navigation/native").usePreventRemoveContext) is not a function. (In '(0, _$$_REQUIRE(_dependencyMap[1], "@react-navigation/native").usePreventRemoveContext)()', '(0, _$$_REQUIRE(_dependencyMap[1], "@react-navigation/native").usePreventRemoveContext)' is undefined)

This error is located at:
    in NativeStackViewInner (at NativeStackView.native.tsx:420)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:419)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at App.js:19)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:18)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in hello_world(RootComponent) (at renderApplication.js:60)

当前使用的App.js代码：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

排查与解决步骤 #

1. 校验依赖版本兼容性 #

该错误大多因@react-navigation/native与@react-navigation/native-stack版本不匹配导致，React Navigation v6要求所有导航核心库版本保持一致。

• 查看当前依赖版本：

  npm list @react-navigation/native @react-navigation/native-stack
  

• 若版本不一致，卸载后重新安装匹配版本：

  npm uninstall @react-navigation/native @react-navigation/native-stack
  npm install @react-navigation/native @react-navigation/native-stack
  

2. 清除缓存并重启项目 #

缓存异常可能导致模块引用错误：

• 清除React Native缓存：

  npx react-native start --reset-cache
  

• 关闭模拟器/真机，重新启动项目：

  npx react-native run-android # iOS环境替换为run-ios
  

3. 检查MainActivity.java修改正确性 #

确保onCreate函数添加无误，避免代码错误：

import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null); // 此处需传入null而非savedInstanceState
  }

  @Override
  protected String getMainComponentName() {
    return "hello_world";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new DefaultReactActivityDelegate(
        this,
        getMainComponentName(),
        DefaultNewArchitectureEntryPoint.getFabricEnabled());
  }
}

4. 确认必需依赖已安装 #

React Navigation v6依赖额外基础库，确保已安装：

npm install react-native-screens react-native-safe-area-context

Android环境需在android/app/build.gradle中添加配置：

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

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