升级React Native 0.70.0与React 18.2.0后遇TypeError问题求助

问题根源 #

第一个报错TypeError: undefined is not an object (evaluating '_reactNative.Text.propTypes.style')是核心诱因：React Native 0.70.0开始移除了内置组件的PropTypes定义，同时React 18.2.0也不再将PropTypes包含在核心库中。项目（或依赖库）中直接调用Text.propTypes.style的代码会因找不到对应属性抛出错误，进而阻断后续AppRegistry初始化流程，引发第二个报错。

解决步骤 #

1. 修复PropTypes引用问题 #

情况1：自有代码中使用了Text.propTypes.style

• 先安装prop-types库：

  npm install prop-types --save
  # 或
  yarn add prop-types
  

• 替换原有代码中的PropTypes引用，以自定义组件的样式校验为例：

  import PropTypes from 'prop-types';
  import { Text } from 'react-native';
  
  const CustomText = ({ style, children }) => <Text style={style}>{children}</Text>;
  
  CustomText.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    children: PropTypes.node.isRequired,
  };
  

情况2：第三方依赖库导致的报错

• 优先检查依赖库版本，查看是否有适配React Native 0.70的更新版本，直接升级该依赖：

  npm update [依赖包名]
  # 或
  yarn upgrade [依赖包名]
  

• 如果依赖库暂无适配版本，使用patch-package给依赖打补丁：
  1. 安装patch-package：

     npm install patch-package --save-dev
     # 或
     yarn add patch-package --dev
     

  2. 找到依赖库中调用Text.propTypes.style的文件，将其替换为prop-types的样式校验，或直接移除该PropTypes校验逻辑。
  3. 生成补丁：

     npx patch-package [依赖包名]
     

  4. 后续安装依赖时，补丁会自动应用。

2. 清理缓存并重建项目 #

解决PropTypes问题后，清理项目缓存避免遗留旧代码干扰：

• 重置Metro缓存：

  npx react-native start --reset-cache
  

• iOS项目：

  cd ios && rm -rf Pods Podfile.lock && pod install && cd ..
  

• Android项目：

  cd android && ./gradlew clean && cd ..
  

• 重新运行项目：

  # iOS
  npx react-native run-ios
  # Android
  npx react-native run-android
  

3. 验证AppRegistry配置（可选） #

如果清理缓存后仍有AppRegistry报错，检查入口文件（通常是index.js）：

• 确认存在正确的App注册代码：

  import { AppRegistry } from 'react-native';
  import App from './App';
  import { name as appName } from './app.json';
  
  AppRegistry.registerComponent(appName, () => App);
  

• 确保入口文件路径在项目配置中无错误。

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