5

我已经成功地将消息从 React Native (RN) 发送到 WebView。

我正在努力解决的问题是将消息从 WebView 传回给 RN。没有显示错误 - 只是消息永远不会通过。

这是我正在使用的代码：

反应本机代码

<WebView
  ref={webview => (this.webview = webview)}
  source={{ uri: "http://www.my-web-site"}}
  onLoadEnd={() => this.onLoadEnd()}
  onMessage={this.onMessage}
  cacheEnabled={false}
  originWhitelist={['*']}
  javaScriptEnabled={true}
/>

onLoadEnd() {
  this.webview.postMessage("RN message");
}

onMessage(message) {
  console.log("I can’t see this message!");
}

网页查看代码

document.addEventListener("message", function (event) {
  setTimeout(function(){document.postMessage("WebView message")}, 3000);
}, false);
4

4 回答 4

5

请确保每个接收器的数据都在并使用您需要的数据。

并且在使用之前总是检查规定的文件，看看如何使用参数和语法。

注册护士

onLoadEnd() {

  this.webview.postMessage("sendmessage");
}

onMessage(event) {
  alert(event.nativeEvent.data);
}

网页查看代码

    document.addEventListener("message", function (event) {
        window.postMessage(event.data);
    });

React-native 版本 5.0 或更高版本

window.ReactNativeWebView.postMessage(event.data);
于 2019-06-24T14:29:43.253 回答
3

哦，终于，我终于找到了答案。这是我最初试图用来从 RN 向 WebView 发送消息的一行代码。原来，这是从 WebView 发送到 RN 所需的代码：

网页查看代码

document.addEventListener("message", function (event) {
  window.ReactNativeWebView.postMessage(event.data);
}, false);

注册护士代码

<WebView onMessage={event => console.log(event.nativeEvent.data)} />
于 2019-06-24T22:05:18.800 回答
2

这行得通。

反应原生

<WebView source={{ ... }}
         containerStyle={{ ... }}
         onMessage={ e => { console.log(e.nativeEvent.data) } }
/>

网络视图

if(window.ReactNativeWebView) {
   // send data object to React Native (only string)
   window.ReactNativeWebView.postMessage(JSON.stringify(dataObject))
}
于 2021-12-12T14:19:13.123 回答
0

如果您想将完整的对象从 webview 发送到 react-native android 应用程序，那么您需要先对对象进行字符串化

// Reactjs 网页应用

  onClickSendObject = (item) => {
    if(window.ReactNativeWebView) {     
       window.ReactNativeWebView.postMessage(JSON.stringify(item))
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在 react-native 应用程序中使用 onMessage （用于功能组件）

<WebView
  ref={webview => (this.webview = webview)}
  source={{ uri: "give source url i.e your webapp link"}}
  onMessage={m => onMessage(m.nativeEvent.data)} // functional component and for class component use (this.onMessage) 
  cacheEnabled={false}
  originWhitelist={['*']}
  javaScriptEnabled={true}
/>

// onMessage function

const onMessage = (m) => {
    const messageData = JSON.parse(m);
    console.log(messageData)
}

于 2022-01-25T15:35:41.093 回答