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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,265评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,274评论 1 288
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,087评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,479评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,782评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,218评论 1 207
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,594评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,316评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,955评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,274评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,803评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,177评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,732评论 3 229
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,953评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,687评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,263评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,189评论 2 258

推荐阅读更多精彩内容