Fork me on GitHub

RN下的WebView通讯

发表于

 通常 RN 适用于一些比较简单的文本或者图形显示的场景，如果遇到更复杂的图表类问题，选择 H5 中的一些成熟第三方库如ECharts等会更便利。当然这样就会额外涉及如何运行WebView及如何跟WebView通讯的问题。

  下面我们直入主题，首先在 RN 中安装运行WebView的依赖库，这里使用的是react-native-webview。

RN 如何往 WebView 中推消息

  在 RN 侧，我们需要拿到这个WebView容器的ref，方便后续的发送消息动作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

// ...
class MyWebComponent extends Component {
  constructor(props) {
    super(props);
    this.webviewRef = React.createRef();
  }
  render() {
    return (
      <WebView
        ref={this.webviewRef}
        source={{ html: '你的HTML字符串' }}
        onMessage={(event) => {
          console.log('RN收到来自WebView的数据', event.nativeEvent.data);
        }}
      />
    );
  }
}

  RN 往 WebView 发送消息：this.webviewRef.current.postMessage(value)。

WebView 如何往 RN 中推消息

  WebView内实际上跑的就是我们的HTML了，在WebView容器内，会在window上注入能够调用原生能力的模块：ReactNativeWebView。

  故，往RN发消息也就那么回事：window.ReactNativeWebView.postMessage('WebView往RN发送的数据')。

  同样的，在WebView中的HTML页面也需要挂载对RN传来消息的监听，IOS和Android有所差异：

1
2
3
4
5
6
7
window.addEventListener('message', function (e) { // IOS
  console.log(e) 
});

document.addEventListener('message', function (e) { // Android
  console.log(e) 
});