reactnative升级到0.60.0,伴随升级系统和xcode10的坑

以下所有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 [email protected] 

你可能感兴趣的:(reactnative升级到0.60.0,伴随升级系统和xcode10的坑)