美文网首页
react-native 踩坑和一些tips

react-native 踩坑和一些tips

作者: vincent涵 | 来源:发表于2018-07-25 15:40 被阅读132次

    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

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

    相关文章

      网友评论

          本文标题:react-native 踩坑和一些tips

          本文链接:https://www.haomeiwen.com/subject/ontraxtx.html