react-native 踩坑和一些tips

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


refresh failed

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);

推荐阅读更多精彩内容