## 升级版本: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以排查错误是何时产生的,血与泪教训**
3. 所有第三方库都安装并成功运行后,就可以把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时失败:
```javascript
[!] 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` ,将
```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` 的导入路径换成
```js
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` 的
```js
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
}
```