> Как передаются данные и токены между нативным приложением и React WebView (React)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: Spotware
Стек: React
> Пример ответа
Передача данных и токенов между нативным приложением и React WebView осуществляется через механизмы мостов (bridges) и обработчиков сообщений. Основные подходы:
-
postMessage / onMessage - универсальный способ. Нативная сторона вызывает
webView.postMessage(data), а в React-коде слушается событиеwindow.addEventListener('message', handler). Обратно React отправляетwindow.ReactNativeWebView.postMessage(data), который ловится нативным обработчикомonMessage. -
Инъекция JavaScript - нативный код может внедрить скрипт с токеном через
evaluateJavascript(Android) илиevaluateJavaScript(iOS). Например, установитьwindow.__TOKEN__ = '...'до загрузки WebView. -
Нативные мосты (Native Modules) - для сложных сценариев создаются кастомные модули, которые экспортируют методы (например,
getToken()), вызываемые из React черезNativeModules. -
URL-схемы - токен передаётся в URL при загрузке WebView (например,
https://app?token=...), но это менее безопасно.
Пример для React (WebView):
JAVASCRIPT// Отправка токена на нативную сторонуwindow.ReactNativeWebView.postMessage(JSON.stringify({ type: 'TOKEN', value: token }));// Получение данных от нативаwindow.addEventListener('message', (event) => {const data = JSON.parse(event.data);if (data.type === 'USER_DATA') {// обработать данные}});
На стороне натива (Android, Kotlin):
webView.settings.javaScriptEnabled = true webView.addJavascriptInterface(WebAppInterface(), "Android") // Отправка в React webView.evaluateJavascript("window.postMessage('{\"type\":\"TOKEN\",\"value\":\"$token\"}')", null) // Получение от React webView.webViewClient = object : WebViewClient() { override fun onPageFinished(view: WebView, url: String) { view.loadUrl("javascript:window.ReactNativeWebView.postMessage('{\"type\":\"READY\"}')") } }
Важно: Всегда проверяйте происхождение сообщений (origin) и используйте шифрование для чувствительных данных. Токены лучше передавать через инъекцию или нативный мост, избегая URL.
> Похожие задачи по frontend
Почему рефы устанавливаются раньше полного рендера в React
Какие подходы в Angular, React и Svelte вам ближе
В чем особенность алгоритма diffing и почему React работает быстро
Перерисуется ли React-компонент при изменении пропсов?
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью