美文网首页
reactnative升级到0.60.0,伴随升级系统和xcod

reactnative升级到0.60.0,伴随升级系统和xcod

作者: 慧惠 | 来源:发表于2020-04-15 11:02 被阅读0次

    以下所有bug发生的情景:

    从
    "react": "?",
     "react-native": "^0.55.4",
    升到
    "react": "^16.8.6",
     "react-native": "^0.60.0",
    

    error1

    error: bundling failed: Error: Multiple configuration files found. Please remove one:
     - package.json
     - /Users/rf/Documents/CommunityManager/.babelrc
    

    babel的配置应该写在.babelrc文件中,不应该写在pakage.json中


    配置错误

    正确写法如下:
    .babelrc文件

    {
      "presets": ["react-native"],
    
    
      "plugins": [
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ]
    }
    

    error2

    error: bundling failed: SyntaxError: /Users/rf/Documents/Project/react/page/xx.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (81:2):
    

    解决:
    1、npm install @babel/plugin-proposal-decorators
    2、如error1正确解法一样配置。


    error3

    error: bundling failed: TypeError: /Users/rf/Documents/Project/react/index.js: Cannot read property 'bindings' of null
    

    解决:
    1、升级 babel-preset-react-native:npm install --save babel-preset-react-native@5
    2、清除xcode缓存,重新编译运行。


    error4

    error: bundling failed: Error: Cannot find module '@babel/preset-env' from '/Users/rf/Documents/Project'
    

    解决:
    1、npm install -D babel-loader @babel/core @babel/preset-env webpack
    2、清除xcode缓存,重新编译运行。


    error5
    这3个表象是一个问题

    error:  undefined is not an object (evaluating '_react.default.PropTypes.bool'
    
    error:undefined is not an object (“evaluating _react3.default.PropTypes.shape”)
    ----备注----
    shape的话,就是头文件中引入了PropTypes,如下:
    import React, { Component, PropTypes } from 'react';
    解决:
    去掉PropTypes的引入加上:
    import PropTypes from 'prop-types';
    

    android:

    eactNativeJS: Cannot read property 'bool' of undefined
    E/art: ClassLinker::FindClass not found:Landroid/security/NetworkSecurityPolicy;
    E/ReactNativeJS: Application CommunityManager has not been registered.
        
        Hint: This error often happens when you're running the packager (local dev server) from a wrong folder. For example you have multiple apps and the packager is still running for the app you were working on before.
        If this is the case, simply kill the old packager instance (e.g. close the packager terminal window) and start the packager in the correct app folder (e.g. cd into app folder and run 'npm start').
        
        This error can also happen due to a require() error during initialization or failure to call AppRegistry.registerComponent.
    

    解决:
    日志中清楚地提到了这个错误,这是由于react native view transformer库引起的。
    库仍然使用来自react的PropTypes包。因为您的react版本高于v15.5,所以它给出了一个错误。

    1、npm install --save prop-types
    2、import PropTypes from 'prop-types'; // ES6;替换React.PropTypes

    如果项目中的PropTypes都是来自import PropTypes from 'prop-types',那找到下面的文件对应的下面的代码,将React.PropTypes替换成PropTypes,并且引入prop-types。
    react-native-view-transformer/library/transform/ViewTransformer.js

    
    ViewTransformer.propTypes = {
      /**
       * Use false to disable transform. Default is true.
       */
      enableTransform: React.PropTypes.bool,
    
      /**
       * Use false to disable scaling. Default is true.
       */
      enableScale: React.PropTypes.bool,
    
      /**
       * Use false to disable translateX/translateY. Default is true.
       */
      enableTranslate: React.PropTypes.bool,
    
      /**
       * Default is 20
       */
      maxOverScrollDistance: React.PropTypes.number,
    
      maxScale: React.PropTypes.number,
      contentAspectRatio: React.PropTypes.number,
    
      /**
       * Use true to enable resistance effect on over pulling. Default is false.
       */
      enableResistance: React.PropTypes.bool,
    
      onViewTransformed: React.PropTypes.func,
    
      onTransformGestureReleased: React.PropTypes.func,
    
      onSingleTapConfirmed: React.PropTypes.func
    };
    

    error6

    error: ListView has been removed from ReactNative.
    

    解决:
    List VIew is deprecated in react native 0.60. So the quick fix is to use deprecated-react-native-listview
    1、npm install deprecated-react-native-listview --save
    2、import ListView from "deprecated-react-native-listview";替换 React中的ListView


    error7

    error:undefined is not an object ( '_react.BackAndroid.addEventListener')
    

    解决:
    从44版本以后RN已经废弃了BackAndroid API,加了新的组件BackHandler,老版本的可以直接把BackAndroid替换成BackHandler就行。
    参考链接,我觉得写的很详细


    error8

    error:unhandled JS Exception: Unexpected token '?' no stack
    

    解决:
    这个最后是重启电脑就解决了(找了很多资料没有类似的情况,欢迎留言补充)


    error9

    error:undefined is not an object Netinfo.isconnected
    

    解决:
    1、yarn add @react-native-community/netinfo
    2、添加依赖
    iOS:pod install
    android:

    //Modify your android/build.gradle configuration:
    buildscript {
      ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        # Only using Android Support libraries
        supportLibVersion = "28.0.0"
      }
    

    参考链接,我觉得写的很详细


    error10
    android:

    Could not find method enabled() for arguments [[]] on task ':ap...
    

    解决:

    //在android/app/build.gradle文件,在下面这一行的位置前面
    apply from: "../../node_modules/react-native/react.gradle"
    //加上下面这一行
    project.ext.react = [ entryFile: "index.android.js" ]
    

    error11
    android:

    Could not get unknown property 'mergeResourcesProvider' for object of type com.android.build.gradle
    

    解决:

    修改/android/build.gradle文件,下面一行的版本号
    
    classpath ‘com.android.tools.build:gradle:3.3.0’
    
    修改/android/gradle/wrapper/grale-wrapper.properties文件,下面一行的版本号 
    
    distributionUrl=https://services.gradle.org/distributions/gradle-4.10.1-all.zip
    

    参考链接


    error12
    android:

    java.lang.RuntimeException: SoLoader.init() not yet called
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2560)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2640)
            at android.app.ActivityThread.access$800(ActivityThread.java:182)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1493)
            at android.os.Handler.dispatchMessage(Handler.java:111)
            at android.os.Looper.loop(Looper.java:194)
            at android.app.ActivityThread.main(ActivityThread.java:5682)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:963)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:758)
         Caused by: java.lang.RuntimeException: SoLoader.init() not yet called
            at com.facebook.soloader.SoLoader.assertInitialized(SoLoader.java:781)
            at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:505)
            at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)
    

    解决:

    添加jsc和Hermes配置
    1.在Application的onCreat添加
    SoLoader.init(this, false)
    2.在build.gradle文件中添加以下配置
    def jscFlavor = 'org.webkit:android-jsc:+'
    project.ext.react = [
            entryFile: "index.js",
            enableHermes: false,  // clean and rebuild if changing
    ]
    def enableHermes = project.ext.react.get("enableHermes", false)
    dependencies {
        if (enableHermes) {
                def hermesPath = "../../node_modules/hermes-engine/android/"
                debugImplementation files(hermesPath + "hermes-debug.aar")
                releaseImplementation files(hermesPath + "hermes-release.aar")
            } else {
                implementation jscFlavor
            }
    }
    3.Sync now
    4.enableHermes = true
    5.clean and rebuild
    

    参考链接
    备注:

    如果node_modules本地库里缺少hermes-engine
    
    终端输入:yarn add --dev hermes-engine@0.1.0 
    

    相关文章

      网友评论

          本文标题:reactnative升级到0.60.0,伴随升级系统和xcod

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