如果在學(xué)習(xí)react-native的過程中遇到什么問題,歡迎加入QQ群397885169一起學(xué)習(xí),一起成長。
識兔已經(jīng)更新到0.57了哦,歡迎star
識兔,一款用來識別圖片的開源項(xiàng)目,在未來還會添加更多有意思的東西

前言
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)在
TextInput的underlineColorAndroid默認(rèn)為透明(終于不用手動更改了)打開
Modal可以覆蓋狀態(tài)欄層?修復(fù)Modal+ FlatList滾動
導(dǎo)出
FlatList和SectionList的動畫,
現(xiàn)在支持Animated的組件包括了View,Text,Image,ScrollView,FlatList,SectionList。
以上是0.56和0.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ā),可能知道要手動添加,但是手動添加到主目錄是沒用的,要參考下兩圖哦!


這里參考了這篇文章
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

解決辦法就是安裝下咯。
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哦!