Question

简短摘要：

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

详细摘要：

在过去的几个月中，我已经使用PHP 7为我的公司构建了大约10个网站。现在，由于来自欧盟的一些资金，我为这些网站建立的大多数公司也需要移动应用程序。仅将它们安装在Android上就足够了，但是也可以在iOS上安装它们。

经过一段时间的搜查，我（也许很愚蠢）决定最好的方法是使用React Native。

现在要详细说明，这些应用程序将是最简单且无用的应用程序，仅用于选中某些纸张上的某个复选框即可。

我建立的所有网站都已经完全具有移动响应能力，因此使用移动浏览器查看和使用它们提供的所有内容完全可以。

这就是为什么最好创建一个内部带有webview的移动本机包装，该包装与浏览器完全一样，尽管没有功能可以浏览URL（除了来自网站的直接链接）。

我做什么：

我将VS Code与内部bash终端一起使用（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

这创建了一个默认的“欢迎使用React”应用程序，并使用棉花糖在模拟的Pixel 2移动版中运行了该应用程序。到目前为止一切顺利。

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

我做了同样的事情，创建了一个新的组件，一切仍然没事。

现在是魂飞魄散：

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 .. && react-native run-android

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

1 个答案: