背景
1.三方庫過時孩饼,采用的是0.48.1愿阐,在2017.9.21日發(fā)布的更新了,已經(jīng)落后于接近一年半了回挽,整體的三方庫偏老没咙,很多都沒有維護(hù)了,比如antd-mobile(螞蟻金服)千劈、teaset(三方ui庫)祭刚、react-native-device-info、react -native-root-toast墙牌、react-native-tab-navigator涡驮、react-navite-storage已經(jīng)很久沒有維護(hù)了。
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.出現(xiàn)了以下問題
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.
解決:刪除對應(yīng)的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根據(jù)報錯逐步升級三方庫棒口,發(fā)現(xiàn)坑太大了寄月,主要的原因是很多三方庫還采用的babel6、但是最新的是采用的babel7會報錯render is not instance的錯无牵,仔細(xì)思考了下漾肮,該方法完全不可控。
2.手動更改
? ? 2.1.新建hell world工程茎毁,升級到0.57.8克懊,解決安卓和ios編譯的問題。
? ? 2.2.升級到babel7
? ? 2.3.切換hcd3.0充岛,根據(jù)hello wolrd工程下的配置保檐,修改react native的版本,強制引用崔梗。修改paction.json。
? ? 2.4.npm i
? ? 2.5.npm audit fix –force
? ? 2.6.編譯打包垒在,啟動服務(wù)蒜魄。
? ? 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系統(tǒng)升級(大于等于10.13.6)签舞,如果存在xocde秕脓,只有在應(yīng)用程序刪除了之后(建議先備份),才能在apple store獲取到最新的xcode10儒搭。
5.Ios吠架,運行時出現(xiàn)不支持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發(fā)現(xiàn)采用的是老版本的babel辙喂,很久沒維護(hù)了,于是換了一個底部tab庫
12.大多數(shù)三方庫都兼容鸠珠,邊打開邊升級到最新的三方庫版本巍耗。查看對應(yīng)三方庫的github,按照說明來安裝渐排。比如jpush炬太,就需要依賴于jcore-react-native。
13.少數(shù)不兼容的驯耻,考慮替換亲族,或者直接不用三方庫,用react native基礎(chǔ)自己封裝一套可缚,比如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三方庫兼容