react-native版本遷移教程

如果在學(xué)習(xí)react-native的過程中遇到什么問題,歡迎加入QQ群397885169一起學(xué)習(xí),一起成長。

識兔已經(jīng)更新到0.57了哦,歡迎star

識兔,一款用來識別圖片的開源項(xiàng)目,在未來還會添加更多有意思的東西

welfare.gif

前言

react-native在三天前,也就是2018.9.12號更新了0.57.0版本,這個(gè)版本終于正常的兼容了babel7,解決了0.56版本使用mobx等裝飾器需要各種配置的問題。

主要更新(合并0.56版本和0.57版本重要的修復(fù))

  • TextInput不能輸入中文的問題

  • TextInput.clear()TextInput.setNativeProps({text: ''})不能正常使用的問題

  • 更新iOS最低兼容到iOS9

  • WebView添加WKWebView,通過useWebKit={true}開啟

  • 為安卓添加overflow

  • 為安卓Image添加默認(rèn)占位圖defaultSource,但是在debug下是看不到的,只有在release中才能看到

  • 安卓現(xiàn)在TextInputunderlineColorAndroid默認(rèn)為透明(終于不用手動更改了)

  • 打開Modal可以覆蓋狀態(tài)欄層?

  • 修復(fù)Modal+ FlatList滾動

  • 導(dǎo)出FlatListSectionList的動畫,
    現(xiàn)在支持Animated的組件包括了View,Text,Image,ScrollViewFlatList,SectionList。

以上是0.560.57版本,我整理的主要更新,更詳細(xì)的更新日志,請參考官方日志。

項(xiàng)目升級

升級

開發(fā)react-native經(jīng)常會遇到升級新版本,官方提供了命令行的升級方式,我管這種叫做升級,這種方式的好處就是傻瓜式,執(zhí)行命令行就可以自動升級版本了,但這個(gè)方式的缺陷也很明顯,如果升級中出現(xiàn)問題,很難排查錯(cuò)誤。所以,我更推薦第二種方式。

遷移

遷移:顧名思義,搬遷移動,流程就是,新建個(gè)項(xiàng)目,把原有項(xiàng)目中的更改,慢慢搬家,搬到新的項(xiàng)目中,這樣的壞處很明顯,很慢,才做過程中,可能會有遺忘,但是這樣方式,更方便管理,流程出現(xiàn)錯(cuò)誤,只要對著原項(xiàng)目更改就可以了,更可控。

0.57版本遷移教程

未使用裝飾器

如果你的項(xiàng)目中,沒有用到Mobx,這種需要es6裝飾器語法支持的三方庫或者方法,那么恭喜你,只要你完整的遷移項(xiàng)目就可以了,除了YellowBox會給你造成一點(diǎn)麻煩外,基本不會遇到其他問題的,如果真的遇到問題啦,歡迎加群,咱們一起討論解決辦法。

使用裝飾器

如果你的項(xiàng)目使用了裝飾器,那么也要恭喜你,順利的度過了0.56版本的那個(gè)深坑,在0.57版本中,要修改的東西相對于0.56少了很多。

接下來,就說明下操作步驟。

  • 首先,需要安裝下面的4個(gè)babel庫,因?yàn)閺?code>0.56版本開始,react-native默認(rèn)支持bable7,之前的寫法都不對了。

package.json

@babel/core
@babel/plugin-proposal-decorators
@babel/plugin-transform-runtime
@babel/runtime
  • 其次,要修改babelrc文件,更新幾個(gè)參數(shù)就好。.文件在mac上是默認(rèn)隱藏的,所以,你可能需要打開IDE,不管是webstrom還是vscode都可以。

  • 完成下面這步就可以正常的使用裝飾器啦!但是最后一步才是最重要的!

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/transform-runtime", {
      "helpers": true,
      "regenerator": false
    }]
  ]
}
  • 修復(fù)App入口文件,默認(rèn)是index.js。這也是個(gè)bug,如果不添加如下代碼,會導(dǎo)致release包無法正常運(yùn)行。詳細(xì)信息可以參考這個(gè)issues,解決辦法comment
import applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor';

import initializerDefineProperty from '@babel/runtime/helpers/esm/initializerDefineProperty';

Object.assign(babelHelpers, { applyDecoratedDescriptor, initializerDefineProperty });

const App = require('./app/index').default;

AppRegistry.registerComponent(appName, () => App);

小技巧

新版本中,對YellowBox做了增強(qiáng),項(xiàng)目中有各種問題都會暴露出來,可以使用YellowBox.ignoreWarnings(['Require cycle:'])關(guān)閉一波。

iOS升級可能遇到的問題

1. 缺少libfishhook.a文件

error: Build input file cannot be found: '/Users/Rabbit/Desktop/DouXi/node_modules/react-native/Libraries/WebSocket/libfishhook.a'

找不到libfishhook.a,如果經(jīng)常開發(fā),可能知道要手動添加,但是手動添加到主目錄是沒用的,要參考下兩圖哦!

修復(fù)錯(cuò)誤1.jpg

修復(fù)錯(cuò)誤2.png

這里參考了這篇文章

2. 'config.h' file not found

老生常談的問題,缺少third-party文件(如果不知道是什么,請點(diǎn)擊該鏈接),但很多人手動添加并且重啟后還是不行,這是少執(zhí)行了一個(gè)sh腳本。

cd node_modules/react-native/third-party/glog-0.3.4
../../scripts/ios-configure-glog.sh

可能有些開發(fā)者的本地glog版本不是0.3.4,所以,這里要對應(yīng)你本地的版本才可以

查看glog本地版本的方法
cd ./rncache
open .

這個(gè)問題是XCode10導(dǎo)致的,每次編譯項(xiàng)目都要執(zhí)行上面的代碼太過于麻煩,所以,可以把上面的代碼寫到package.json中,如下

...
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "build": "cd node_modules/react-native/third-party/glog-0.3.5/ && ../../scripts/ios-configure-glog.sh",
    "test": "jest"
  },
...

3. 如下圖,缺少@runtime

9EE9A1A0192EF593DE4ED99D7E2EC795.jpg

解決辦法就是安裝下咯。
yarn add @babel/runtime 或者 npm install @babel/runtime

總結(jié)

0.57是個(gè)很棒的版本,之后會瘋狂安利,react-native也在重構(gòu),真心希望可以解決現(xiàn)在存在的各種痛點(diǎn)。

如果在學(xué)習(xí)react-native的過程中遇到什么問題,歡迎加入QQ群397885169一起學(xué)習(xí),一起成長。

我開源的項(xiàng)目識兔在昨天完成0.57版本的更新,歡迎star哦!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容