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
Update Build Tools version and sync project
Open File
按提示改高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文件中界面对应的里设置好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);