ReactNatve项目的升级

升级版本: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

上一篇:@recruit-paas/flow-group
下一篇:算法-数组去重

相关推荐

  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    5 个月前
  • 重大升级!SEER见证人,您的节点需要在10月28日前更新

    SEER的区块链底层目前还处于不断完善中。一些新的完善更新会为区块链的基础设施——节点软件添加新的功能。理事会将会就是否接受新的节点版本进行共识投票,如果提案投票通过,将要求所有见证人在指定时间前将节...

    1 年前
  • 记一次 Bug 引发的 babel 升级

    文章同时发布与 segmentfault 和 掘金 起因 最近参与了一个新的项目,是基于 React + Antd + Ts + Mobx 来写的。项目安装完依赖之后,启动的时候会看到控制台报错:...

    1 年前
  • 移动Web体验月报(6月):MIP 核心代码升级,增加基于 Vue 开发能力

    为推进Web技术的发展,Brilliant Open Web 团队特推出每月一期的月报,该月报将整理较流行的移动Web加速技术,并跟进各项技术的进展和发展方向,以期帮助开发者了解或选用相关的技术,把...

    2 年前
  • 汉吉斯特Hanjst+更新升级:error reporting, innerLoop和loadingLayer

    过去的几个月里,汉吉斯特Hanjst进行了一些升级,有功能增强,也有性能优化,为Hanjst的生产环境部署增砖添瓦、保驾护航。为便于后续维护和持续更新改进,兹备忘于下。

    1 年前
  • 开发者工具编辑器内核升级啦!6大功能抢先体验!

    作为百度智能小程序开发者,开发者工具编辑器想必大家都非常了解了~!它是百度智能小程序官方提供的代码开发工具,为小程序开发提供了大量的针对性优化功能,如:小程序的代码高亮、代码提示、代码模板、px转rp...

    23 天前
  • 如何优雅的升级到 webpack4

    前言 现在距离2018年2月15号webpack4.0.0出来已经有一段时间了,现在已经出了 @vue/cli 3.0,但是楼主还没试过,听说很强大,想要试水的可以看文档 @vue/cli,官方脚手架...

    2 年前
  • 基于Vue实现拖拽升级(九宫格拖拽)

    前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入 传送门:Demo以及完整代码连接 效果实例 简单了解Grid布局(网格布局) 什么是网格...

    2 年前
  • 只要三步,将koa的node服务升级到https

    开篇写一堆可有可无的内容都是耍流氓,所以我们直接开始讲升级步骤。 一、安装必要的包 yarn add https fs koa-sslify或者 npm i -S https fs koa-sslif...

    1 年前
  • 升级到节点7后,找不到模块“内部/ FS”;

    Nathanalecxe提出了一个问题:Cannot find module 'internal/fs' after upgrading to node 7,或许与您遇到的问题类似。

    3 年前

官方社区

扫码加入 JavaScript 社区