不变违规：requireNativeComponent：在 UIManager 中找不到 "RNCWebView"

Question

朋友们好，我在将 react-native-webview 链接到我的项目后遇到了这个错误

Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.

    This error is located at:
        in RNCWebView (at WebView.android.js:250)
        in RCTView (at WebView.android.js:253)
        in WebView (at App.js:7)
        in App (at renderApplication.js:45)
        in RCTView (at AppContainer.js:109)
        in RCTView (at AppContainer.js:135)
        in AppContainer (at renderApplication.js:39)

还有我的代码

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

Error Image in my android

Answer 1

运行 react-native link react-native-webview

检查：https://github.com/react-native-community/react-native-webview/issues/140

Answer 2

我遇到了同样的问题。尝试将此行添加到您的 podfile :-

pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'

然后转到 ios 文件夹 cd ios 并安装 pods pod install

它已经为我解决了这个问题。

Answer 3

试试这些步骤。

1. 删除 pods 文件夹和 podfile.lock
2. npm 卸载 react-native-webview
3. npm i react-native-webview
4. cd ios
5. pod 安装
6. (npx) react-native run-ios
7. 重置缓存

Answer 4

我已经完成了以下步骤：

 1. cd ios
 2. rm Podfile.lock
 3. pod install

这安装了缺少的库，即 react-native-webview 并在 Podfile 文件中添加了下面一行。

 pod 'react-native-webview', :path => '../node_modules/react-native-webview'

我工作的环境：

"react": "16.9.0",
"react-native": "0.61.5"

Answer 5

我对这个问题的解决方案如下：

Android

1 将此添加到您的 android/settings.gradle

include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

2 将此添加到您的 android/app/build.gradle

dependencies {
    implementation project(':react-native-webview')
    ....

3 在你的 MainApplication.java:

import com.reactnativecommunity.webview.RNCWebViewPackage;//add this import
....

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNCWebViewPackage(),//add line
          ....

IOS

1 在您的 ios/Podfile 中添加以下行，然后打开您的终端，转到您的项目 ios 文件夹和 运行 pod install

...
  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
...

Answer 6

使用 React Native 0.60+，无需向 podfile 添加任何内容。 再试一次cd ios && pod install

如果没有帮助，请尝试重新启动模拟器并重建应用程序。 重启 Xcode 也是个好主意。

您可以选择清理 XCode 中的构建文件夹

Answer 7

我之前遇到过同样的问题，我试过这个：

pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'

Answer 8

尝试在安装和 link webview 包 (npx react-native 运行-android)

后重新构建您的项目

Answer 9

确保你做到了：

1. npx pod-install
2. npx react-native run-ios

安装包后你。需要更新 pods，然后再次 运行 项目。

Answer 10

遵循这些对我有用的简单步骤：

1. 重建应用程序。 运行:

npx react-native run-android

2. 运行:

react-native link react-native-webview

3. 检查 RNCWebViewPackage 是否导入到 MainApplication.java 文件中，它看起来像这样：

import com.reactnativecommunity.webview.RNCWebViewPackage;

注意：我正在使用 react-native@0.64.2。

Answer 11

对于 React Native 0.60+，无需添加任何内容或使用 link。 在我的例子中，这是 android，我只是使用以下方法再次构建项目： $ npm 运行 android

Answer 12

您尝试过手动link吗？

转到 ../node_modules/react-native-webview/ios 并将 RNCWebView.xcodeproj 拖放到 Xcode 上的 Libraries 文件夹，之后立即转到构建阶段选项卡（在 Xcode 上）在“Link binary With libraries”部分添加 libRNCWebView.a（在 Libraries/RNCWebView.xcodeproj/Products 内）。尝试构建 运行

Answer 13

我将 webView 更新到最新版本 (11.18.1)，它已修复，无需任何额外的链接步骤。