2

简短的摘要：

尝试在使用 React Native 构建的移动应用程序中使用WebViewfrom'react-native-webview'来呈现 URL 内容是一件让我头疼的事情。

长总结：

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

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

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

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

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

我做了什么：

我将 VS Code 与内部 bash 终端一起使用（操作系统 = Windows 10）

我安装并更新了 NPM

  • 节点.js

    $ node -v
    v12.8.0
    
    $ npm -v
    6.10.3
  • 安卓工作室 + SDK
  • 安卓虚拟设备

我在我的项目文件夹中打开了 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 内容并从 中导入Text,和其他一些内容View，玩玩了，模拟器中的应用程序接受了所有内容，甚至图像。到目前为止，一切都很好。AppRegistry'react-native'

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

现在是魂器：

Facebook 的说明告诉我们遵循新的和改进的react-native-community/react-native-webview


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

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

现在我将其更改为：


    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 的正确方法是什么？

4

1 回答 1

2

我认为你应该运行：

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

于 2019-12-31T01:33:36.893 回答