React Native 和 WebView 互相收发消息
目录
React Native WebView 是RN的HTML渲染组件，它接受 HTML 或 URI 来加载文档，简单来说就是像浏览器那样的组件，用 WebView 实现 H5 + Native 混合开发，可以让 H5 代码更加通用。WebView 主要用 message 的方法与文档通信。
安装 WebView
本文安装的 WebView 版本是 11.x.x。
yarn add react-native-webview
安装后，重新编译项目。
H5 -> Native
组件会给 H5 的 window 对象注入 ReactNativeWebView，postMessage 方法用来向 Native 发送消息，参数只能是 string 类型。
H5
window.ReactNativeWebView.postMessage("Message from H5");
Native
const H5ToNative = () => {
<WebView
onMessage={e => {
// e.nativeEvent.data 取得 "Message from H5"
console.log(e.nativeEvent.data)
}}
/>
}
onMessage 回调中 e 的内容示例
{
"nativeEvent": {
"canGoBack": false,
"canGoForward": false,
"data": "Message from H5",
"loading": false,
"target": 9,
"title": "TEST",
"url": "about:blank"
}
}
Native -> H5
反过来，Native 也可以向 H5 发送消息，参数也只能是 string 类型。
Native
const NativeToH5 = () => {
const webviewRef = React.useRef<WebView>()
const do = () => { // 主动向 H5 发送数据
webviewRef.current?.postMessage("Message from Native")
}
<WebView ref={webviewRef} />
}
H5
document.addEventListener("message", e => {
// e.data 可取得 "Message from Native"
console.log(e.data)
})
注意 H5 收到 e 后，直接 console.log(e) 不会打印出数据，但是 e.data 可取得数据。