Как правильно использовать WebView в React Native? - PullRequest
Новая
       80

Как правильно использовать WebView в React Native?

1 голос
/ 19 сентября 2019

Краткое резюме:

Попытка использовать WebView из 'react-native-webview' для рендеринга содержимого URL-адресов в мобильных приложениях, созданных с помощью React Native, - заноза для меня.

Подробное описание:

За последние несколько месяцев я использовал PHP 7 для создания примерно 10 веб-сайтов для своей компании.Теперь из-за некоторого финансирования со стороны Европейского Союза большинству этих компаний, для которых я создал сайт, также нужны мобильные приложения.Достаточно иметь их только для Android, но было бы неплохо иметь их и для iOS.

После довольно долгих поисков, я (возможно, по глупости) решил, что лучшим подходом будет использование React Native.

Теперь, чтобы уточнить, эти приложения будут самыми простыми и бесполезными приложениями, предназначенными только для того, чтобы установить флажок на бумаге.

Все сайты, которые я создал, уже полностью адаптированы для мобильных устройств, поэтому использованиеМобильный браузер, чтобы видеть и использовать все, что они предлагают, совершенно нормально.

Вот почему было бы очень хорошо просто создать мобильную встроенную оболочку с веб-обзором внутри, которая работает точно так же, как браузер, хотя и без функциональности для серфингана 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 terminal в моей папке Projects и запустил несколько команд: 


    $ 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 по умолчанию и запустило его в эмулированном Pixel 2 mobile сЗефирка.Пока все хорошо.

Я изменил содержимое 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

, но без изменений снова.

Как правильно использовать WebView в React Native?

...