android - React Native BackAndroid 已被弃用，并已从此包中删除。使用 BackHandler 代替

Question

3 天前 Google 发布了重大变更更新 - https://developers.google.com/android/guides/releases 。这次更新给 React Native 项目(包括我的项目)带来了很多问题。我尝试了两种方法 - 保留旧的支持库并迁移到 androidX 并解决所有依赖项，使用:杰蒂尼，https://gist.github.com/janicduplessis/df9b5e3c2b2e23bbae713255bdb99f3c , https://github.com/react-native-community/react-native-blur/issues/310

没有运气。最后，我构建成功，但 bundler 出现了您可以在屏幕截图中看到的错误。我调试了它，然后我到了react-native-vector-icons/lic/react-native.js，它只“从react-native导入*”，但这里确实有些东西不对劲。

我确实看到了RN 0.59.5 with RN-vector-icons 6.4.2 throwing BackAndroid is deprecated and has been removed from this package. Use BackHandler instead并且更新到最新版本并没有改变任何东西。我还尝试完全删除这个模块，但后来我收到了一些有关动画值的其他错误，这让我更加怀疑这不是正确的方法。我错过了一些东西 - 三天前一切都很好，这些库没有任何改变。

错误屏幕截图可以在这里找到: https://github.com/react-native-community/react-native-blur/issues/310

<小时/>

android/app/build.gradle

    apply plugin: "com.android.application"
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
    import com.android.build.OutputFile

    project.ext.react = [
          entryFile: "index.js",
          nodeExecutableAndArgs : ["/usr/local/bin/node"]
    ]

    apply from: "../../node_modules/react-native/react.gradle"

    def enableSeparateBuildPerCPUArchitecture = false
    def enableProguardInReleaseBuilds = true

    android {
    compileSdkVersion rootProject.ext.compileSdkVersion

        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }

    defaultConfig {
        applicationId "com.moonsite.mimunflex"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 21
        versionName "3.2.0"
        multiDexEnabled true
        renderscriptSupportModeEnabled true
        vectorDrawables.useSupportLibrary = true
        ndk.abiFilters 'armeabi-v7a','arm64-v8a','x86','x86_64'
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
        release {
    //          minifyEnabled true
            useProguard true
    //          shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            signingConfig signingConfigs.release
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

    dependencies {
    compile project(':react-native-touch-id')
    compile project(':react-native-android-open-settings')
    compile project(':react-native-bottom-action-sheet')
    compile project(':react-native-appsflyer')
    compile project(':react-native-device-info')
    compile project(':react-native-share')
    compile project(':react-native-view-shot')
    compile project(':react-native-blur')
    compile project(':react-native-contacts')
    implementation 'com.android.support:multidex:1.0.3'
    compile project(':react-native-detect-navbar-android')
    compile project(':react-native-bottom-sheet-behavior')
    compile project(':react-native-splash-screen')
    compile(project(':react-native-firebase')) {
        transitive = false
    }

    implementation 'com.facebook.fresco:fresco:1.13.0'
    implementation 'com.facebook.fresco:animated-gif:1.13.0'

    compile project(':react-native-fbsdk')
    compile project(':react-native-image-crop-picker')
    compile project(':react-native-awesome-card-io')
    compile project(':react-native-linear-gradient')
    compile project(':react-native-vector-icons')
    compile project(':react-native-extra-dimensions-android')
    compile project(':react-native-sensitive-info')
    compile project(':react-native-push-notification')

    // Firebase dependencies
    compile "com.google.firebase:firebase-messaging:16.0.1"
    compile "com.google.android.gms:play-services-base:16.0.1"
    compile "com.google.firebase:firebase-analytics:16.0.1"
    compile "com.google.firebase:firebase-core:16.0.1"

    implementation "com.android.support:support-v4:${rootProject.ext.supportLibVersion}"
      implementation 'com.android.support:cardview-v7:27.1.1'
      implementation 'com.android.support:customtabs:27.1.1'

      implementation 'com.android.support:design:27.1.1'
      implementation fileTree(dir: "libs", include: ["*.jar"])
      implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
      implementation "com.facebook.react:react-native:+"  // From 
 node_modules

}
    configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        if (details.getRequested().getGroup() == 'com.google.android.gms') 
    {
            // If different projects require different versions of
            // Google Play Services it causes a crash on run.
            // Fix by overriding version for all projects.
            // details.useVersion('11.6.0')
        }

    }
    resolutionStrategy {
        // force 'com.android.support:support-v4:25.2.0'
    }

   }

    // Run this once to be able to run the application with BUCK
    // puts all compile dependencies into folder libs for BUCK to use
    task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
    }

    apply plugin: 'com.google.gms.google-services'

<小时/>

android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
        googlePlayServicesVersion = "16.1.0"
        firebaseVersion = "17.3.4"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.4.1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.google.gms:google-services:4.2.0'
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            // url "$rootDir/../node_modules/react-native/android"
            url 'https://maven.google.com'
        }
        maven {
            url 'https://maven.fabric.io/public'
        }
        maven { url "https://jitpack.io" }
        jcenter()
    }

}
subprojects {
    afterEvaluate { project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion rootProject.ext.compileSdkVersion
                buildToolsVersion rootProject.ext.buildToolsVersion
            }
        }
    }
}

 /*

subprojects
        {project ->
            if (project.name.contains('react-native-') ||
                    project.name.contains('react-native-blur')
            ) {
                android {
                    compileSdkVersion rootProject.ext.compileSdkVersion
                    buildToolsVersion rootProject.ext.buildToolsVersion
                }
                buildscript {
                    repositories {
                        google()
                        maven { url = 'https://dl.bintray.com/android/android-tools/'}
                        jcenter()
                    }
                    dependencies {
                        classpath 'com.android.tools.build:gradle:3.3.1'
                    }
                }
            }
        }*/

<小时/>

package.json

{
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  },
  "name": "MY",
  "version": "3.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "preinstall": "./preinstall.sh",
    "test": "jest",
    "postinstall": "node ./android-release-gradle-fix.js",
    "sa": "react-native run-android",
    "si": "react-native run-ios",
    "ra": "cd android && ./gradlew assembleRelease",
    "cc": "watchman watch-del-all && rm -rf /tmp/metro-bundler-cache-* && rm -rf /tmp/haste-map-react-native-packager-*",
    "cm": "rm -rf node_modules/",
    "cmyi": "yarn cm && yarn install",
    "cmar": "yarn cc && yarn cmyi && react-native link && yarn sa"
  },
  "dependencies": {
    "Faker": "^0.7.2",
    "axios": "^0.18.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "creditcardutils": "^1.0.0",
    "lodash": "^4.17.11",
    "mobx": "^4.1.1",
    "mobx-react": "^5.0.0",
    "moment": "^2.22.1",
    "ramda": "^0.25.0",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-android-open-settings": "^1.3.0",
    "react-native-animatable": "^1.3.0",
    "react-native-appsflyer": "^1.2.12",
    "react-native-awesome-card-io": "^0.8.2",
    "react-native-axios": "^0.17.1",
    "react-native-blur": "^3.2.2",
    "react-native-bottom-action-sheet": "^0.0.18",
    "react-native-bottom-sheet-behavior": "^1.0.0-beta.8",
    "react-native-checkbox": "^2.0.0",
    "react-native-collapsible": "^0.12.0",
    "react-native-communications": "^2.2.1",
    "react-native-contacts": "^2.2.2",
    "react-native-datepicker": "^1.7.2",
    "react-native-detect-navbar-android": "^0.2.0",
    "react-native-device-info": "^2.1.2",
    "react-native-dropdown": "^0.0.6",
    "react-native-elements": "^0.19.1",
    "react-native-extra-dimensions-android": "^1.2.5",
    "react-native-fbsdk": "^0.8.0",
    "react-native-fence-html": "^1.0.6",
    "react-native-firebase": "^5.4.2",
    "react-native-htmlview": "^0.13.0",
    "react-native-image-crop-picker": "^0.20.3",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-linear-gradient": "^2.5.4",
    "react-native-loader": "^1.2.1",
    "react-native-modal": "^11.0.1",
    "react-native-picker-select": "^5.1.0",
    "react-native-progress": "^3.5.0",
    "react-native-pull-to-refresh": "^2.1.3",
    "react-native-push-notification": "^3.0.2",
    "react-native-render-html": "^4.1.1",
    "react-native-selectme": "^1.2.3",
    "react-native-sensitive-info": "^5.2.6",
    "react-native-share": "^1.1.3",
    "react-native-slider": "^0.11.0",
    "react-native-snap-carousel": "^3.7.2",
    "react-native-splash-screen": "3.0.7",
    "react-native-swiper": "^1.5.13",
    "react-native-timer-countdown": "^2.0.3",
    "react-native-toaster": "^1.2.0",
    "react-native-touch-id": "^4.4.1",
    "react-native-vector-icons": "^6.5.0",
    "react-native-view-shot": "^2.4.0",
    "react-navigation": "1.6.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.6",
    "babel-jest": "^24.8.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^3.1.1",
    "eslint": "^5.9.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-native": "^3.5.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.0",
    "prettier": "1.16.4",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

部分错误

ExceptionsManager.js:82 Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage
reactConsoleErrorHandler @ ExceptionsManager.js:82
console.error @ YellowBox.js:59
printWarning @ warning.js:30
warning @ warning.js:51
warnOnce @ warnOnce.js:29
get AsyncStorage @ react-native-implementation.js:217
(anonymous) @ react-native.js:1
(anonymous) @ react-native.js:1
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ create-icon-set.js:3
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ FontAwesome.js:6
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ myButton.js:4
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ index.js:1
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ registerHeader.js:4
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ register.js:17
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ navigator.js:6
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ rootHub.js:19
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ app.js:14
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ index.js:2
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:197
metroRequire @ require.js:125
(anonymous) @ 8444844f-a756-435b-b388-0f179f51285e:237934
executeApplicationScript @ debuggerWorker.js:40
(anonymous) @ debuggerWorker.js:72
Show 24 more frames
ExceptionsManager.js:82 Warning: NetInfo has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/netinfo' instead of 'react-native'. See https://github.com/react-native-community/react-native-netinfo
reactConsoleErrorHandler @ ExceptionsManager.js:82
console.error @ YellowBox.js:59
printWarning @ warning.js:30
warning @ warning.js:51
warnOnce @ warnOnce.js:29
get NetInfo @ react-native-implementation.js:271
(anonymous) @ react-native.js:1
(anonymous) @ react-native.js:1
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ create-icon-set.js:3
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ FontAwesome.js:6
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ myButton.js:4
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ index.js:1
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ registerHeader.js:4
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ register.js:17
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ navigator.js:6
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ rootHub.js:19
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ app.js:14
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:205
metroRequire @ require.js:125
(anonymous) @ index.js:2
loadModuleImplementation @ require.js:330
guardedLoadModule @ require.js:197
metroRequire @ require.js:125
(anonymous) @ 8444844f-a756-435b-b388-0f179f51285e:237934
executeApplicationScript @ debuggerWorker.js:40
(anonymous) @ debuggerWorker.js:72
Show 24 more frames
ExceptionsManager.js:74 BackAndroid is deprecated and has been removed from this package. Use BackHandler instead
handleException @ ExceptionsManager.js:74
handleError @ setUpErrorHandling.js:23
reportFatalError @ error-guard.js:42
guardedLoadModule @ require.js:199
metroRequire @ require.js:125
(anonymous) @ 8444844f-a756-435b-b388-0f179f51285e:237934
executeApplicationScript @ debuggerWorker.js:40
(anonymous) @ debuggerWorker.js:72
infoLog.js:16 Running application "MY" with appParams: {"rootTag":81}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
ExceptionsManager.js:74 Application MY 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.


handleException @ ExceptionsManager.js:74
handleError @ setUpErrorHandling.js:23
reportFatalError @ error-guard.js:42
__guard @ MessageQueue.js:316
callFunctionReturnFlushedQueue @ MessageQueue.js:105
(anonymous) @ debuggerWorker.js:80

Answer 1

好吧，对于任何偶然发现此类错误的人来说，就我而言，它来自重复的开发依赖项。我不确定它是如何到达那里的，但是在删除“babel-core”:“^7.0.0-bridge.0”之后，一切都好多了。