RN一個完整的項目做下來并迭代好幾個版本了,一直沒時間總結,這里總結一下。
一、問題踩坑
1、拿到項目先 yarn
再 react-native link
不要輕易 react-native upgrade。慎重!因為可能會把你的iOS項目文件關聯搞沒!!!!(報 ":CFBundleIdentifier", Does Not Exist,原因可能很多,網上說的方法不一定適合,我遇到一種情況終端run-ios報這個錯,xcode可以運行是RN版本的問題,據說RN0.56解決了這個問題)
2、安卓studio的gradle很坑:(本人主iOS,安卓很水,安卓大神請忽略)
1??第一次打開項目,記得開VPN,并且等好久
2??出問題看下面報錯,點他的提示一般都能解決
3??gradle提示更新,不是閑的蛋疼不要更新
4??新項目react-native run-android運行報錯,先用studio打開調試調試
5??調試的時候遇到 version is 3.3. Current version is 2.4類似的問題,先file-》invalidate caches / Restart 一下,再不行下面報錯有提示setting,點擊,選本地->安裝目錄下->contents->gradle->gradle-4.1,如果不行,就找到android-》gradle-》wrapper-》gradle-wrapper.properties 并修改成相應的號碼就好了
6??下面這種情況,把build.gradle里面號碼改高,比如3.1.0,再restart
7??Error:The SDK Build Tools revision (23.0.1) is too low for project ':app'. Minimum required is 25.0.0
<a href="fix.build.tools.version">Update Build Tools version and sync project</a>
<a href="openFile:/Users/lyhhomemac/Desktop/捷庫工作RN_Git/RNCandidateProj/android/app/build.gradle">Open File</a>
按提示改高build.gradle和app/build.gradle兩個文件里的相應參數,繼續restart(不光自己項目要改高,有些導入的第三方也需要改高)
8??android studio運行沒問題后,可能終端還會報錯,這個就自己搜吧
3、相應庫報錯,百度、谷歌搜不到,就去相應庫的github的issues找
4、有時候run報錯,查看一下端口占用,把占用的端口刪掉
查看端口占用:lsof -i:8081
刪除端口占用:kill -9 19412
5、The development server returned response error code: 500
http://blog.csdn.net/wn1245343496/article/details/77623530
6、第三方庫版本和RN有的不兼容,一定要看github第三方庫版本兼容對照表,用npm info xxxx 來查看第三方庫版本號
7、 "undefined is not an object (evaluating'RCTWebViewBridgeManager.Navigation.Type"在Xcode里導入第三方
8、yarn 總是鏈接不上報錯
info There appears to be trouble with your network connection. Retrying...
可能是之前操作yarn有錯誤,卡死了。一種解決方法:
刪除yarn.lock、yarn-error.log、node_modules,然后重新yarn
9、Android SurfaceView導出實現的RNView模塊,父控件不能flex布局,因此必須SurfaceView外面套一層view,否則不顯示
https://github.com/luhui/RNSurfaceViewIssue
二、tips:
1、不能同時運行多個RN項目,運行新的項目把之前的終端大退掉重新運行。
2、生成指定版本的RN項目:react-native init AppName --version 0.52.0
3、引入第三方庫:yarn add xxxxx
react-native link
4、每次添加新的第三方庫或者react-native link 都可能把node_modules里所有的庫更新,如果你對第三方庫有改源碼,一定要先拷貝一份,更新完之后再放進去
5、鍵盤處理,iOS建議第三方庫 IQKeyboardManager 處理,簡單方便沒有bug
安卓自帶處理方法
在項目的AndroidManifest.xml文件中界面對應的<activity>里設置好android:windowSoftInputMode,根據需要設置,我設置的是adjustPan
6、react-native自帶的控件Modal,一般情況下不要使用,不需要動畫的話自己寫個絕對布局的View就夠用了,或者去找個第三方的modal庫。這里推薦一個國人寫的UI庫,teaset,用起來很爽
7、設置全局變量global很方便,不過有兩點要注意
1??一定要在index.js注冊App之前設置好引入
2??使用這些全局變量的文件,不能引入到設置全局變量的文件中,不然會報undefined
8、RN項目因為啟動要耗時加載jsbundle,所以會出現啟動白屏,在這時需要讓app加載一個啟動圖,推薦一個第三方react-native-splash-screen
9、監聽將要顯示(離開)某個頁面,類似于Android的onResume()等,iOS的viewWillAppear等。利用React Navigation的addListener。
const didBlurSubscription = this.props.navigation.addListener(
'willFocus',
payload => {
console.debug('didBlur', payload);
}
);
// Remove the listener when you are done
didBlurSubscription.remove();
https://reactnavigation.org/docs/zh-Hans/navigation-prop.html
10、React Navigation的TabNavigator手動切換tab
// 先pop到頂層的TabNavigator
this.props.navigation.popToTop();
// 再跳轉到相應tab
const resetActionTab = NavigationActions.navigate({routeName: 'Tab'
});
this.props.navigation.dispatch(resetActionTab);