「React Native」版本升级

背景

1.三方库过时,采用的是0.48.1,在2017.9.21日发布的更新了,已经落后于接近一年半了,整体的三方库偏老,很多都没有维护了,比如antd-mobile(蚂蚁金服)、teaset(三方ui库)、react-native-device-info、react -native-root-toast、react-native-tab-navigator、react-navite-storage已经很久没有维护了。
2.低版本不直接支持typescript.js
3.对高版本兼容弱,我们的工程在xcode10上编译不过。在安卓高版本上也有些问题。

版本选型

1.react native 0.57.8
2.react 16.6.3
3.babel 7

升级分析

1.尝试采用react-native-git-upgrade工具
    1.1升级工程下package.json中的react native版本和react 版本。
    1.2安装react-native-git-upgrade工具模块
    1.3

npm i

    1.4react-native-git-upgrade(直接把react native升级到最新版本,或者react-native-git-upgrade X.Y.Z 这样把react native升级到指定的X.Y.Z版本)
    1.5.出现了以下问题

Your project contains lock files generated by tools other than Yarn. It 
is advised not to mix package managers in order to avoid resolution 
inconsistencies caused by unsynchronized lock files. To clear this 
warning, remove package-lock.json.

解决:删除对应的lock文件
    1.6遇到Error:

 Couldn't find preset "module:metro-react-
native-babel-preset": 

解决:package.json中添加"metro-react-native-babel-preset": "0.48.0"
    1.7根据报错逐步升级三方库,发现坑太大了,主要的原因是很多三方库还采用的babel6、但是最新的是采用的babel7会报错render is not instance的错,仔细思考了下,该方法完全不可控。
2.手动更改
    2.1.新建hell world工程,升级到0.57.8,解决安卓和ios编译的问题。
    2.2.升级到babel7
    2.3.切换hcd3.0,根据hello wolrd工程下的配置,修改react native的版本,强制引用。修改paction.json。
    2.4.npm i
    2.5.npm audit fix –force
    2.6.编译打包,启动服务。
    2.7.逐步注释打开引用,一步一步删除三方库。

升级步骤

1.新建hello world工程。React native init helloWord 修改package.json中的react和react native的版本号。
2.将babel6升级到Babel7
3.Android之前是通过compile编译三方库,改为implements了。
4.在xcode 10编译运行,mac系统升级(大于等于10.13.6),如果存在xocde,只有在应用程序删除了之后(建议先备份),才能在apple store获取到最新的xcode10。
5.Ios,运行时出现不支持x86体系,在配置文件中改为debug模式,
6.将自动管理签名取消勾选。
7.ios12欠缺libstdc++.6.0.9.tbd,将其放在xcode指定文件夹下

/Applications/Xcode.app/Contents/Developer/
Platforms/iPhoneOS.platform/Developer/SDKs
/iPhoneOS12.0.sdk/usr/lib/ 
/Applications/Xcode.app/Contents/Developer/
Platforms/iPhoneSimulator.platform/Developer
/SDKs/iPhoneSimulator.sdk/usr/lib/

8.babel7不自带支持装饰,也就是不能使用注解,需要引入plugin-proposal-decorators,并在babel文件中配置。

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

9.从app根目录逐步打开注释,升级mobx,直接用use strict会报错。升级完还是报错。
10.引入"jsc-android": "236355.x.x",用来兼容安卓。
11.逐步打开三方库,react-native-tab-navigator完全按照配置,但是跑着报错,修改源码就包render is not instance,查看其package,json发现采用的是老版本的babel,很久没维护了,于是换了一个底部tab库
12.大多数三方库都兼容,边打开边升级到最新的三方库版本。查看对应三方库的github,按照说明来安装。比如jpush,就需要依赖于jcore-react-native。
13.少数不兼容的,考虑替换,或者直接不用三方库,用react native基础自己封装一套,比如react native device info也是直接升级会报render is not instance
14.然后替换完所有的三方库,基本上就完成了升级。

1.三方库因为babel升级而不能用的库有teaset(三方ui库)、react-native-device-info、react-native-root-toast、react-native-tab-navigator、react-native-storage
2 .babel升级
3 .babel7不直接支持装饰
4.Code push变更为app center
5.ios12缺少两个库
6.android编译三方库 compile变成implements
7.最新mobx需要下载jsc三方库兼容

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容