ReactNatve项目的升级

JavaScript黑粉头子
1,582 阅读3分钟

升级版本：0.59.9 => 0.61.5

react-native有两种升级方式，第一种就是使用官方的升级工具自动升级，分别执行 npm install -g react-native-git-upgrade 和 react-native-git-upgrade 进行自动升级，然后解决冲突就可以了，然而过来人都不推荐我使用这种升级方法， 最终我采取了手动进行升级的方法，虽然第三方库要一个一个升级，但好过控制台抛出一个又一个安卓或ios的原生问题体验要友好的多，尤其是对于我这种没有接触过安卓和ios开发的菜鸟来说。

升级步骤：

  1. 新建一个reactnative0.61.5项目，并运行在ios和Android上；

  2. 把旧项目的 package.json 中的第三方库一个一个的安装在新项目中，安装一个运行一个，成功一个就使用git保存一个；

注： 一定要安卓及ios两个平台都运行一下，不然后面出错可能就要回退git以排查错误是何时产生的，血与泪教训

  1. 所有第三方库都安装并成功运行后，就可以把js代码复制到新项目文件夹中了， 然后运行看控制台输出的错误更改就行了，一般都是库API变更的错误，按照提示或者查找API变更就可以了；

today Extension的迁移

如果项目的小组件是纯ios项目，那么新建一个同名 today Extension 项目,然后将原 today 项目文件夹内的文件粘贴到新建的项目文件夹下是最简单的方法，没有之一，如果运行产生了错误，多半是一些文件的引入问题，在 today Extension 项目的 Build Phases => Complie Sources 或者 Build Phases => Link Binary With Libraries添加相应的文件或者库即可 。

到此rn的升级就结束了，以下是我安装第三方库时遇到的部分问题记录：

部分三方库问题记录

react-native-fast-image

安装 react-native-fast-image 后，执行 cd ios && pod install && cd .. 时，Installing libwebp (1.0.3)出现了错误，说安装libwebp时失败：

[!] Error installing libwebp
[!] /usr/bin/git clone https://chromium.googlesource.com/webm/libwebp /var/folders/b0/10b_68z1047902d7pkxmbkcc0000gn/T/d20200204-17461-u7zr2x --template= --single-branch --depth 1 --branch v1.0.3

Cloning into '/var/folders/b0/10b_68z1047902d7pkxmbkcc0000gn/T/d20200204-17461-u7zr2x'...
fatal: unable to access 'https://chromium.googlesource.com/webm/libwebp/': Failed to connect to chromium.googlesource.com port 443: Operation timed out

查询了很多资料，有两种解决方法，第一种配置终端的代理，然而对我没有用，这里就不记录了，我使用了第二种方法：使用镜像。 mac系统打开 /Users/你的电脑用户名/.cocoapods/repos/master/Specs/1/9/2/libwebp/1.0.3/libwebp.podspec.json ，将

"git": "https://chromium.googlesource.com/webm/libwebp"
 更改为
"git": "https://github.com/webmproject/libwebp"

然后重新 pod install 就好了。

react-native-splash-screen

配置好 react-native-splash-screenios 之后，并在 ios/项目名/Images.xcassets 下的两个文件夹分别配置好桌面图标和启动屏之后，启动屏并没有生效，如果xcode的版本是11，那么打开Xcode，点击 LaunchScreen.xib 文件，把右侧的 Use Launch Screen 取消选中，然后在 General => App Icons and Launch Images 选项中，将 Launch Screen File 清空，最后在 Build Settings => Copy Bundle Resources 添加启动屏文件的路径；

react-native-spring-scrollview

react-native-spring-scrollview2.0.23 在reactnative0.6+以上版本会出现错误。把 node_modules/react-native-spring-scrollview/SpringScrollView.js 中 TextInputState 的导入路径换成

import * as TextInputState from "react-native/Libraries/Components/TextInput/TextInputState";

就可以了。

react-native-largelist-v3

在rn0.61.5中，如果不指定 renderHeader 固定在头部，安卓真机和ios模拟器不会显示renderHeader ，但会空出空白区域，修改 node_modules/react-native-largelist-v3/LargeList.js 中函数 _renderHeader 的

style={StyleSheet.flatten([header.props.style, { transform, zIndex }])}
//  修改为：
style={StyleSheet.flatten([header.props.style, { transform: transform.length ? transform: undefined, zIndex }])}

就可以了。

忘了具体那个库了

运行在安卓时，控制台抛出了 D8: Cannot fit requested classes in a single dex file (# methods: 66423 > 65536) 的错误，是说方法数量超出一个dex文件数量限制，只要在目录下的app/build.gradle文件中添加 multiDexEnabled true 即可。

defaultConfig {
       ... ...
       multiDexEnabled true
   }
avatar
文章
阅读
粉丝