简介

React Native 每一次小升级的变动，还是比较容易的，对比一下官方提供的升级助手，就能完成对应的升级，但是如果说你从0.60升级到0.70，中间有很多版本的跨度，这就比较头疼了，这次主要讲的是0.67升级到0.73.4。

一般来说，你照着工具来操作，基本是会多少出现点问题或者是无法兼容的，毕竟每个人搭建的框架以及集成的包是不一样的。

工具

注意：

1. 上面的name，可以填，也不可以不填（反正你填了也没用）
2. 选择当前React Native，和需要升级的版本

React native 官方升级助手

升级步骤

升级步骤，主要分为升级React Native，Android，IOS，升级三方包，兼容

React Native 部分

注意，改完React native代码后，需要把node_modules删掉，重新yarn一下。

注意，如果出现以下报错，就yarn.lock文件，将所有的“nlark”替换为：“npmmirror”

环境

• node
  node 版本必须大于等于18
  npm install 18
• ruby
  ruby 版本必须大于等于2.6.10
  这边我用的rvm安装的ruby，所以用rvm 重新装了一下，用brew的话，直接brew install ruby
rvm install ruby-3.2.2 --reconfigure --enable-yjit --with-openssl-dir=$(brew --prefix openssl@3)
• pod 版本升级
  pod update
• 三方包升级
  yarn upgrade-interactive --latest

package.json

• dependencies

主要升级react,react native,react-use...这些，直接按照工具里直接升级就好了，没有问题。

注意
如果你项目有react-native-apk-installer-n、rn-fetch-blob，那么你需要把这些包移除掉的，这个包已经不兼容了，可以考虑更换成react-native-blob-util或者其他的。

• devDependencies

1. 这里需要就比较多，按照工具里升级，然后可能会缺失一部分，比如 `eslint-config,metro-config、typescript-config等等。
2. resolutions更换成engines，两者不能同时存在。

metro.config.js

这边主要是为了解决yarn dev启动后，出现无法识别svg、png、jpg等图片。

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

const {
  resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

• 无关紧要

下面框出来的地方，是可以直接忽略不用理睬的，不需要做改变。

IOS

• 根据上面的图片，然后修改ios的info、build Settings等文件，修改注意空格之类的

• 修改.m文件到.mm文件到时候，需要双击文件，在文件的右上角进行修改。

Android

android这边太久了，我也忘了遇到什么错了.......