React Native设备运行报unconfigurable property getter修改错误如何解决

问题原因 #

该报错是你使用的已停止维护的react-navigation v4版本与React Native/Expo原生运行环境的JS引擎（Hermes/JavaScriptCore）兼容性问题导致：

• Web端JS引擎对属性重定义的容错性更高，且不需要加载导航所需的原生依赖，因此运行正常
• 实体设备上的JS引擎对JS语法规范检查更严格，旧版导航库修改不可配置属性时就会触发该报错

修复方案 #

方案一：适配现有旧版导航代码 #

无需修改导航逻辑，只需补全依赖并加兼容处理：

1. 安装旧版导航所需的原生依赖，Expo项目执行：

expo install react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

普通React Native项目执行：

npm install react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2. 在项目入口文件App.js的最顶部第一行引入手势处理库：

import 'react-native-gesture-handler';
// 其余import代码放在这行之后

3. 清除缓存重新编译项目即可：

# Expo项目
npx expo start --clear
# 普通React Native项目
npx react-native start --reset-cache

方案二：升级到官方维护的新版React Navigation（推荐） #

彻底解决兼容问题，长期迭代更稳定：

1. 卸载旧版导航依赖：

npm uninstall react-navigation react-navigation-stack

2. 安装新版导航核心依赖：

# Expo项目
expo install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
# 普通React Native项目
npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

3. 修改你的导航栈代码适配新版API：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Buttons from '../../components/Buttons'
import Waiting from '../../components/Waiting'

const Stack = createNativeStackNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Buttons} />
      <Stack.Screen name="Wait" component={Waiting} />
    </Stack.Navigator>
  );
}

export default () => {
  return (
    <NavigationContainer>
      <HomeStack />
    </NavigationContainer>
  );
};

4. 清除缓存重新运行项目即可。

内容的提问来源于stack exchange，提问作者Code With Banchi