WebView JS与RN进行通讯

Posted 2020-08-20 地球人

RN0.37终于官方增加了WebView与React Native的通讯，之前一真使用的是第三方控件React-Native-WebView-Bridge，但不是知道怎么回事这个第三方控件喊了很长时间最终却是另一作者提交了该功能的官方版本。言归正转，由于Web的需求丰富多样所以如果不能实现WebView里的JS与RN的通讯的话，就显得特别不方便，下面代码示例如何获取当前的WebView Title,（实时Title，第一次加载的标题RN有Nativestate的方式获取，但如果Title被动态变更的话通过该办法就获取不了）。

import React, { Component } from \'react\';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  WebView,
  Button,
} from \'react-native\';

export default class RN37 extends Component {
  webview = null;
  //执行JS代码，会被转为字符串，使用injectedjavascript方法用eval执行字符串方法
  postMessage = () => {
    if (this.webview) {
      this.webview.postMessage(\'window.postMessage("Title："+document.title);\');
    }
  }

  //接收WebView JS事件消息
  onMessage = e => {
    alert(e.nativeEvent.data);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button enabled onPress={this.postMessage} title="Send Message to Web View" />
        <WebView
          ref={webview => { this.webview = webview; } }
          style={{
            flex: 1,
            width:360,
          }}
          injectedJavaScript="document.addEventListener(\'message\', function(e) {eval(e.data);});"
          source={{uri:"https://www.baidu.com"}}
          onMessage={this.onMessage}
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: \'center\',
    alignItems: \'center\',
    backgroundColor: \'#F5FCFF\',
  }
});

AppRegistry.registerComponent(\'RN37\', () => RN37);

执行效果