Все чаще использовать свой веб-сайт в веб-представлении приложения вместо того, чтобы создавать полное приложение с нуля.

Из этого туториала Вы узнаете, как создать веб-просмотр в react-native expo.

Что такое WebView?

Первый вопрос, который должен прийти вам в голову, - что такое веб-просмотр в мистическом мире разработки мобильных приложений.

Веб-просмотр - это компонент, который отображает javascript, HTML и CSS в вашем мобильном приложении. Это браузер в вашем приложении.

Преимущества WebView:

  1. Вам не нужно разрабатывать специальное приложение для разных платформ.
  2. Чтобы обновить новые функции, вам просто нужно обновить веб-сайт, а не все приложение. (Обновление веб-сайта занимает намного меньше времени по сравнению с обновлением приложения)
  3. Вам не нужно изучать новый фреймворк или специфические вещи для Android и iOS, чтобы разработать приложение, достаточно просто знания интеграции с веб-просмотром.

Начало работы с Webview

Начнем с кода:

Note: I am assuming you already know how to set-up the expo and react-native in your system. If you don’t please follow this guide https://docs.expo.io/

Создать новый проект Expo

expo init my-webview-app

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

expo start

Загрузите интерактивную веб-версию в свой проект

yarn add react-native-webview

Создайте новый компонент WebViewScreen.js и импортируйте его в файл App.js.

Настройка WebView в файле WebViewScreen.js:

источник: = URL-адрес, который вы хотите отображать в веб-просмотре.

renderLoading: = компонент загрузки, который будет отображаться во время загрузки веб-просмотра.

Внедрение javascript в веб-просмотр

В большинстве случаев мы хотим внедрить некоторый javascript в наш веб-просмотр.

Например:

Чтобы установить токен OAuth в локальном хранилище браузера.

Для этого мы можем использовать функцию injectJavaScript ().

Мы можем добиться этого, как показано ниже:

onLoadStart принимает функцию, которая вызывается, когда веб-просмотр начинает загружаться.

WEBVIEW_REF - это ссылка, определенная для получения веб-просмотра.

WEBVIEW_REF.current.injectJavscript(script);

эта строка вставляет javascript в браузер.

Заключение

Здесь мы создали пример веб-просмотра на выставке. Webview намного мощнее этого.

С помощью Webview вы можете делать все то же, что и в обычном браузере, например менять вкладки, включать и выключать режим инкогнито,

и многое другое.

Узнайте больше о Webview:

Https://docs.expo.io/versions/latest/sdk/webview/