Все чаще использовать свой веб-сайт в веб-представлении приложения вместо того, чтобы создавать полное приложение с нуля.
Из этого туториала Вы узнаете, как создать веб-просмотр в react-native expo.
Что такое WebView?
Первый вопрос, который должен прийти вам в голову, - что такое веб-просмотр в мистическом мире разработки мобильных приложений.
Веб-просмотр - это компонент, который отображает javascript, HTML и CSS в вашем мобильном приложении. Это браузер в вашем приложении.
Преимущества WebView:
- Вам не нужно разрабатывать специальное приложение для разных платформ.
- Чтобы обновить новые функции, вам просто нужно обновить веб-сайт, а не все приложение. (Обновление веб-сайта занимает намного меньше времени по сравнению с обновлением приложения)
- Вам не нужно изучать новый фреймворк или специфические вещи для 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/