「React Native」版本升級

背景

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三方庫兼容

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末涩赢,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子轰胁,更是在濱河造成了極大的恐慌谒主,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赃阀,死亡現(xiàn)場離奇詭異霎肯,居然都是意外死亡,警方通過查閱死者的電腦和手機榛斯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門观游,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人驮俗,你說我怎么就攤上這事懂缕。” “怎么了王凑?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵搪柑,是天一觀的道長聋丝。 經(jīng)常有香客問我,道長工碾,這世上最難降的妖魔是什么弱睦? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任渊额,我火速辦了婚禮况木,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘旬迹。我一直安慰自己火惊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布奔垦。 她就那樣靜靜地躺著屹耐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪宴倍。 梳的紋絲不亂的頭發(fā)上张症,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天,我揣著相機與錄音鸵贬,去河邊找鬼。 笑死脖捻,一個胖子當(dāng)著我的面吹牛阔逼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播地沮,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼嗜浮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了摩疑?” 一聲冷哼從身側(cè)響起危融,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎雷袋,沒想到半個月后吉殃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡楷怒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年蛋勺,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸠删。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡抱完,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出刃泡,到底是詐尸還是另有隱情巧娱,我是刑警寧澤碉怔,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站禁添,受9級特大地震影響撮胧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜上荡,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一趴樱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酪捡,春花似錦叁征、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至永罚,卻和暖如春啤呼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呢袱。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工官扣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人羞福。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓惕蹄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親治专。 傳聞我的和親對象是個殘疾皇子卖陵,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容