android - Invariant Violation：WebView 已从 React Native 中移除

Question

我正在尝试运行一个已有2 年历史的 react-native项目。当我运行我的项目时，它显示错误

Invariant Violation：WebView已从 React Native 中删除。它现在可以安装和导入， 'react-native-webview'而不是'react-native'. 见 https://github.com/react-native-community/react-native-webview

和

不变违规：模块AppRegistry不是注册的可调用模块（调用runApplication）

但我没有安装或使用任何名为react-native-webviewor的包，webview 并且我已将所有gradle文件和依赖项更新package.json到当前版本

我的 package.json

"dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "axios": "^0.19.2",
    "native-base": "^2.13.8",
    "react": "^16.13.0",
    "react-native": "^0.61.5",
    "react-native-android-location-services-dialog-box": "^2.8.2",
    "react-native-drawer": "^2.5.1",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-firebase": "^5.6.0",
    "react-native-geocoding": "^0.4.0",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-google-places-autocomplete": "^1.4.1",
    "react-native-image-picker": "^2.3.1",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-maps": "^0.26.1",
    "react-native-paper": "^3.6.0",
    "react-native-permissions": "^2.0.9",
    "react-native-push-notification": "^3.1.9",
    "react-native-qrcode": "^0.2.7",
    "react-native-spinkit": "^1.5.0",
    "react-native-swiper": "^1.5.14",
    "react-native-switch": "^1.5.0",
    "react-navigation": "^4.2.2",
    "react-navigation-material-bottom-tabs": "^2.2.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.1.3",
    "toggle-switch-react-native": "^2.1.0"
  },

设置.gradle

rootProject.name = 'revamp_alpha_consumer'
    include ':react-native-spinkit'
    project(':react-native-spinkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spinkit/android')
    include ':react-native-push-notification'
    project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
    include ':react-native-maps'
    project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
    include ':react-native-image-picker'
    project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
    include ':react-native-gesture-handler'
    project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
    include ':react-native-firebase'
    project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
    include ':react-native-fetch-blob'
    project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
    include ':react-native-android-location-services-dialog-box'
    project(':react-native-android-location-services-dialog-box').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-location-services-dialog-box/android')
    include ':@react-native-community_async-storage'
    project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
    apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

    include ':app'

android/app/build.gradle

dependencies {

    implementation project(':react-native-spinkit')
    implementation project(':react-native-push-notification')
    implementation project(':react-native-maps')
    implementation project(':react-native-image-picker')
    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-firebase')
    implementation project(':react-native-fetch-blob')
    implementation project(':react-native-android-location-services-dialog-box')
    implementation project(':@react-native-community_async-storage')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "com.google.android.gms:play-services-base:16.1.0"
    implementation "com.google.firebase:firebase-core:16.0.9"
    implementation "com.google.firebase:firebase-messaging:18.0.0"

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

安卓/build.gradle

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28

        supportLibVersion = "28.0.0"
        googlePlayServicesVersion = "16.1.0" // default: "+"
        firebaseVersion = "17.3.4" // default: "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.2")
        classpath 'com.google.gms:google-services:4.3.3'
    }
}
allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import bgMessaging from './components/bgMessaging';
import Root from './Root';

// YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
// AppRegistry.registerComponent('Alpharevamp', () => Root);

AppRegistry.registerComponent(appName, () => Root);
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging); // <-- Add this line

我尝试在安装'react-native-webview'软件包并添加其依赖项后运行它（没有使用，仅安装用于检查错误是否消退）。但是发生了同样的错误。

手机屏幕浏览器错误

标签： androidreactjsreact-nativewebview

Answer 1

您正在使用的react-native-qrcodepackage.json不再被维护。

该库正在使用WebView它作为 react-native 的一部分，如下所示，

var {
    View,
    WebView,
    Platform
} = require('react-native');

但这不再与较新版本的 react-native 兼容，对于较新版本，您需要WebView如下导入，

import { WebView } from 'react-native-webview'

因此，最好删除react-native-qrcode并移至其他库，例如react-native-qrcode-scanner

希望这对您有所帮助。随意怀疑。