美文网首页ReactNative开发
ReactNative从0.53.0升级到0.59.0采坑记录

ReactNative从0.53.0升级到0.59.0采坑记录

作者: peaktan | 来源:发表于2019-03-18 19:14 被阅读0次

    一、升级步骤

    1、升级工具包
    npm install -g react-native-cli yarn
    
    2、生成一个与原来工程一样名字的工程
    react-native init ProjectName
    
    如果你是搭建的sinopia私有npm服务的话,需要对@符号的库进行重定向到npm的公服,不然无法解析,会报错
    npm config set "@react-navigation:registry" http://registry.npmjs.org/
    npm config set "@react-native-community:registry" http://registry.npmjs.org/
    npm config set "@jest:registry" http://registry.npmjs.org/
    npm config set "@cnakazawa:registry" http://registry.npmjs.org/
    npm config set "@types:registry" http://registry.npmjs.org/
    
    3、将iOS和Android原生工程先进行手动迁移到新工程中
    • 工程能跑起来再进行下一步
    4、将JS代码进行迁移到新工程
    • 直接copy过来即可
    • 先不着急升级react-navigation,先把第三方库的问题找出来,有问题的就先进行升级或者替换
    5、升级react-navigation
    • 卸载原来的react-navigation yarn remove react-navigation
    • 安装最新的react-navigation yarn add react-navigation
    6、用Xcode10.1跑项目遇到的问题

    二、升级之后的问题

    1、react-native-svg
    屏幕快照 2019-03-16 上午10.46.32.png 屏幕快照 2019-03-16 上午10.25.55.png 屏幕快照 2019-03-16 上午10.44.16.png

    解决方案:
    去掉react-native-iber-svg,安装最新的react-native-svg
    去掉react-native-iber-qrcode-svg,安装最新的react-native-qrcode-svg

    2、stripe
    屏幕快照 2019-03-16 上午10.48.19.png 屏幕快照 2019-03-16 上午10.48.28.png

    报错原因:
    解决方案:

    3、Slider
    屏幕快照 2019-03-16 上午10.33.05.png

    报错原因:A trailing comma is not permitted after the rest property
    解决方案:

    4、Malformed calls from JS:field sizes are different
    屏幕快照 2019-03-16 上午11.28.55.png

    报错原因:Malformed calls from JS:field sizes are different
    解决方案:

    5、react-navigation
    屏幕快照 2019-03-16 下午12.27.05.png

    解决方案:

    yarn add react-native-gesture-handler
    react-native link react-native-gesture-handler
    
    6、react-navigation
    屏幕快照 2019-03-16 下午12.39.09.png

    解决方案:
    导出的createStackNavigator要用createAppContainer包裹才能用
    https://reactnavigation.org/docs/en/app-containers.html

    7、react-navigation
    屏幕快照 2019-03-16 下午12.50.42.png

    在iPhone中手势返回的时候报错
    问题分析:
    该问题是由于screen没有得到手势返回的事件,是由于createAppContainer懒加载导致的,如果你的代码是让createAppContainer等待一些耗时事件完成之后再显示加载的,就会出现改问题

    解决方案:

    给每一个screen手动添加手势
    
    import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
    gestureHandlerRootHOC(screen);
    
    8、react-navigation
    904629-402a53410b67e013.png

    解决方案:

    NavigationActions.reset  替换成  StackActions.reset
    
    9、Xcode10运行项目报错node_modules/react-native/third-party/glog-0.3.5

    解决方案:

    cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../
    cd node_modules/react-native/third-party/glog-0.3.5/ && ../../scripts/ios-configure-glog.sh
    
    10、node_modules/@sentry/cli: Command failed.

    解决方案:
    升级node版本
    参考链接

    11、Xcode打Release包报错:1.ld: could not reparse object file in bitcode bundle: 'Invalid bitcode version (Producer: '902.0.39.2_0' Reader: '900.0.39.2_0')', using libLTO version 'LLVM version 9.0.0, (clang-900.0.39.2)' for architecture arm64

    解决方案:
    关闭bitcode


    1440335-339f3bb09550a53a.png

    三、 其他问题

    1、SliderViewPagerAndroidWebViewAsync Storage在未来将从react-native中移除,需要从@react-native-community引入

    可参考:
    https://github.com/react-native-community/react-native-slider
    https://github.com/react-native-community/react-native-viewpager
    https://github.com/react-native-community/react-native-webview
    https://github.com/react-native-community/react-native-async-storage

    2、升级之后,View的默认背景色为白色,之前是灰色
    3、语法更严谨
    • const 修饰的变量不能修改
    • 组件的样式大小不能为空(比如:width: null)

    相关文章

      网友评论

        本文标题:ReactNative从0.53.0升级到0.59.0采坑记录

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