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

Question

Я новичок в React Native.

Мне нужно создать связь между RN-Web-RN (RN-Web и затем Web-обратно RN).

Предположим, у меня есть список элементов в моей сети, которые вызывались внутри веб-просмотра.Каждый элемент в списке можно нажимать.Когда я щелкаю один из элементов в списке элементов внутри своей сети, я перенаправляю его на страницу приложений React Native и показываю подробности объекта, для которого реализован объект.

Что я делал до сих пор: я могу добавить Javascript из React Native вВеб-просмотр, подобный следующему:

<WebView
  source={{uri: "myweb.com/webview.php"}}
  injectedJavaScript={jsCode}
  javaScriptEnabledAndroid={true}
  style={{height: 100}} />

Этот код может открыть связь между веб-страницей React Native до внутри веб-просмотра, но мне все равно не удается связаться с веб-сайтом внутри веб-просмотра до ReactРодные.Кто-нибудь может объяснить, как это сделать (и возможно ли это?)?

Answer 1

Вам необходимо использовать window.postMessage для связи с Web на RN.

В вашем injectedJavascript сделайте что-то вроде этого:

const injectedJs = `
  window.postMessage("Your message");
`;

(в вашем случае вам нужно будет найти список элементов DOM и использовать postMessage при каждом нажатии)

А затем на вашем компоненте WebView прочитайте это сообщение так:

<WebView
    source={{uri: "myweb.com/webview.php"}}
    injectedJavaScript={injectedJs}
    startInLoadingState
    javaScriptEnabledAndroid={true}
    javaScriptEnabled={true}
    onMessage={event => {
      alert('MESSAGE >>>>' + event.nativeEvent.data);
    }}
/>

Вы даже можете отправить строку json как сообщение.