在 React Native 中使用 WebView 的正确方法是什么

Question

简短总结：

尝试使用 'react-native-webview' 中的 WebView 在使用 React Native 构建的移动应用程序中呈现 URL 内容是我的一根刺。

总结：

在过去的几个月里，我使用 PHP 7 为我的公司构建了大约 10 个网站。现在因为来自欧盟的一些资金，我建立网站的这些公司中的大多数也需要移动应用程序。仅将它们用于 Android 就足够了，但如果它们也用于 iOS 那就太好了。

经过一番谷歌搜索后，我（也许是愚蠢地）决定最好的方法是使用 React Native。

现在详细说明，这些应用程序将是最简单和无用的应用程序，只是为了在某些纸上选中某个复选框。

我建立的所有网站都已经完全响应移动设备，因此使用移动浏览器查看和使用它们提供的所有内容都非常好。

这就是为什么只创建一个内部带有 webview 的移动原生包装器会非常好，它的工作方式与浏览器完全一样，尽管除了来自网站的直接链接之外没有浏览到 URL 的功能。

我做了什么：

我使用带有内部 bash 终端的 VS Code (OS = Windows 10)

我安装并更新了 NPM

• Node.js

    $ node -v
    v12.8.0
    
    $ npm -v
    6.10.3

• Android Studio + SDK
• Android 虚拟设备

我在我的项目文件夹中打开了 VS Code 终端并运行了一些命令：

    $ npm i -g react-native-cli
    <path>\react-native -> <path>\node_modules\react-native-cli\index.js
    + react-native-cli@2.0.1
    
    $ npm i -g yarn
    <path>\yarnpkg -> <path>\node_modules\yarn\bin\yarn.js
    <path>\yarn -> <path>\node_modules\yarn\bin\yarn.js
    + yarn@1.17.3
    
    $ react-native init test1
    /.../
    Done in 68.03s.
    /.../
    Done in 36.62s.
    /.../
    Done in 52.31s.
    
    $ cd test1
    
    $ react-native start

打开另一个终端：

    $ react-native run-android

这创建了一个默认的 Welcome to React 应用程序，并在使用 Marshmallow 的模拟 Pixel 2 移动设备中运行它。到目前为止一切顺利。

我更改了 App.js 内容并从'react-native' 导入了Text、View、AppRegistry 和其他一些内容，玩了一遍，模拟器中的应用程序接受了所有内容，甚至图像。到目前为止一切顺利。

我做了同样的事情来创建一个新组件，一切都还可以。

现在是魂器：

Facebook 的instructions 告诉我们关注新的和改进的react-native-community/react-native-webview

    $ yarn add react-native-webview@androidx
    yarn add v1.17.3
    /.../
    Done in 28.07s.
    
    $ react-native start

我在 render() 中只有 <View><Text>Hello</Text></View> 的代码仍然有效。

现在我把它改成：

    import React, {Component} from 'react';
    import { AppRegistry, View, Text } from 'react-native';
    import { WebView } from 'react-native-webview';
    
    export default class test1 extends Component{
      render() {
        return (
          <WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
        );
      }
    }
    
    AppRegistry.registerComponent('test1', () => test1);

我得到一个错误，说： Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.

尝试$ react-native link 没有任何改变。 也试过了

    $ react-native link react-native-webview
    info Linking "react-native-webview" iOS dependency
    info iOS module "react-native-webview" has been successfully linked
    info Linking "react-native-webview" Android dependency
    info Android module "react-native-webview" has been successfully linked

但又没有变化。

在 React Native 中使用 WebView 的正确方法是什么？

Answer 1

我认为你应该跑：

cd android && gradlew clean && cd .. && npx react-native run-android