WebView JS與RN進行通訊

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);

執行效果