Это один из способов передачи данных между собственным веб-представлением React и реагирующим приложением.
У меня может быть много возможных способов связи между веб-представлением нативного приложения реакции и приложением реакции, которое размещено отдельно. Я столкнулся с таким требованием и делюсь решением, которое решил применить здесь.
Прежде всего, давайте рассмотрим базовую реализацию реагирующего приложения и родного приложения reatc.
Простое приложение React:-
- В useEffect() App.js добавьте прослушиватель событий, который прослушивает любое собственное событие. Он присутствует в объекте окно HTML. Метод
addEventListener()
интерфейсаEventTarget
устанавливает функцию, которая будет вызываться всякий раз, когда указанное событие доставляется цели. Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener - В присоединяемой нами функции слушателя мы получаем объект nativeEvent, внутри которого мы можем найти данные, отправляемые из React native или любого внешнего источника, предназначенного для HTML-документа.
- Чтобы отправить сообщение для реакции, мы можем использовать метод window.ReactNativeWebView.postMessage(). Это не требует дополнительного импорта или добавления какого-либо пакета. Он встроен в HTML-объект окно. Метод
window.postMessage()
обеспечивает безопасный обмен данными междуWindow
объектами; например, между страницей и всплывающим окном, которое она порождает, или между страницей и iframe, встроенным в нее. Ссылка: https://developer.mozilla.org/en-US/docs /Web/API/Window/postMessage
Простое нативное приложение React с веб-представлением:-
- Создайте простой веб-просмотр из любого пакета npm
- Чтобы получать сообщения с веб-сайта, присоедините метод, указывающий на свойство onMessage = {} в веб-просмотре. В этой функции мы можем обработать входящее сообщение.
- Чтобы отправлять сообщения для реагирования, нам нужно установить ref для веб-представления, чтобы получить текущий экземпляр упомянутого объекта с помощью useRef(). Прикрепите его с помощью ref = {webViewRef}
- Используя webViewRef.current.postMessage(), мы можем отправлять сообщения, чтобы реагировать на веб-сайт.
- Если мы хотим инициировать что-то во время componentDidMount(), то мы можем сделать это, добавив требуемый метод в свойство onLoadEnd() веб-просмотра, который запускает обратный вызов, когда веб-просмотр загружает на него веб-сайт.
- Мы упомянули последнюю версию userAgents. Также были включены некоторые реквизиты, такие как domStorageEnabled, cacheEnabled, javaScriptEnabled и т. Д., Для повышения производительности реагирования на собственный экран, который загружает веб-просмотр.
- Мы также можем показывать пользовательские загрузчики, пока сайт не загрузится.
Делюсь своим репозиторием Github здесь: https://github.com/svbala99/react-zoom и https://github.com/svbala99/zoomsdk-sign-generator-express
Эти репозитории помогут вам настроить веб-представление, в котором вы можете провести масштабную встречу в веб-представлении в режиме реагирования. Второе репо предназначено для создания безопасной подписи. Об этом сообщает официальный Zoom.
Я надеюсь, что это может быть полезно для кого-то. Спасибо за прочтение. Вернусь с еще одной интересной статьей. Будьте здоровы, берегите себя!!!