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

執行效果