ReactNatve项目的升级

2020-02-13

升级版本:0.59.9 => 0.61.5

react-native有两种升级方式,第一种就是使用官方的升级工具自动升级,分别执行 npm install -g react-native-git-upgradereact-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.jsTextInputState的导入路径换成

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
   }
原文链接:juejin.im

上一篇:再看 JavaScript 继承
下一篇:算法-数组去重
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部