Это один из способов передачи данных между собственным веб-представлением React и реагирующим приложением.

У меня может быть много возможных способов связи между веб-представлением нативного приложения реакции и приложением реакции, которое размещено отдельно. Я столкнулся с таким требованием и делюсь решением, которое решил применить здесь.

Прежде всего, давайте рассмотрим базовую реализацию реагирующего приложения и родного приложения reatc.

Простое приложение React:-

  1. В useEffect() App.js добавьте прослушиватель событий, который прослушивает любое собственное событие. Он присутствует в объекте окно HTML. Метод addEventListener() интерфейса EventTarget устанавливает функцию, которая будет вызываться всякий раз, когда указанное событие доставляется цели. Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
  2. В присоединяемой нами функции слушателя мы получаем объект nativeEvent, внутри которого мы можем найти данные, отправляемые из React native или любого внешнего источника, предназначенного для HTML-документа.
  3. Чтобы отправить сообщение для реакции, мы можем использовать метод window.ReactNativeWebView.postMessage(). Это не требует дополнительного импорта или добавления какого-либо пакета. Он встроен в HTML-объект окно. Метод window.postMessage() обеспечивает безопасный обмен данными между Window объектами; например, между страницей и всплывающим окном, которое она порождает, или между страницей и iframe, встроенным в нее. Ссылка: https://developer.mozilla.org/en-US/docs /Web/API/Window/postMessage

Простое нативное приложение React с веб-представлением:-

  1. Создайте простой веб-просмотр из любого пакета npm
  2. Чтобы получать сообщения с веб-сайта, присоедините метод, указывающий на свойство onMessage = {} в веб-просмотре. В этой функции мы можем обработать входящее сообщение.
  3. Чтобы отправлять сообщения для реагирования, нам нужно установить ref для веб-представления, чтобы получить текущий экземпляр упомянутого объекта с помощью useRef(). Прикрепите его с помощью ref = {webViewRef}
  4. Используя webViewRef.current.postMessage(), мы можем отправлять сообщения, чтобы реагировать на веб-сайт.
  5. Если мы хотим инициировать что-то во время componentDidMount(), то мы можем сделать это, добавив требуемый метод в свойство onLoadEnd() веб-просмотра, который запускает обратный вызов, когда веб-просмотр загружает на него веб-сайт.
  6. Мы упомянули последнюю версию userAgents. Также были включены некоторые реквизиты, такие как domStorageEnabled, cacheEnabled, javaScriptEnabled и т. Д., Для повышения производительности реагирования на собственный экран, который загружает веб-просмотр.
  7. Мы также можем показывать пользовательские загрузчики, пока сайт не загрузится.

Делюсь своим репозиторием Github здесь: https://github.com/svbala99/react-zoom и https://github.com/svbala99/zoomsdk-sign-generator-express

Эти репозитории помогут вам настроить веб-представление, в котором вы можете провести масштабную встречу в веб-представлении в режиме реагирования. Второе репо предназначено для создания безопасной подписи. Об этом сообщает официальный Zoom.

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