因为RN中文网的文档实在是不够清晰（渣渣个人感觉），感觉比较难看懂，百度相关的也比较少和不清晰，查了下搞懂后记录下来，先看代码 RN端
/** * Created by yulam on 2017/3/9. */ import React, {Component} from "react"; import {AppRegistry, Text, View, TouchableHighlight, WebView} from "react-native"; class WevViewApp extends Component { constructor( props ) { super( props ); this.webView = null; } onMessage( event ) { console.log( "On Message", event.nativeEvent.data ); } sendPostMessage() { console.log( "Sending post message,this is RN" ); this.webView.postMessage( "Post message from react native " ); } render() { return ( <View style={{flex: 1}}> <TouchableHighlight style={{padding: 10, backgroundColor: 'blue', marginTop: 20}} onPress={() => this.sendPostMessage()}> <Text style={{color: 'white'}}>Send post message from react natives</Text> </TouchableHighlight> <WebView style={{flex: 1}} source={require('../connect.html')} javaScriptEnabled={true} ref={( webView ) => this.webView = webView} //以下可以说是页面传信息过来会触发 onMessage={this.onMessage} /> </View> ); } } module.exports = WevViewApp; <html> <body> <button>Send post message from web</button> <div>Post message log</div> <script> document.querySelector("button").onclick = function() { console.log("Send post message,this is web"); window.postMessage("Post message from web", "*"); } document.addEventListener("message", function(event) { console.log("Received post message", event); alert(event.data); }, false); function logMessage(message) { log.append((new Date())); } </script> </body> </html>部署上之后，debugger模式运行，结果是如下
点击上方蓝色按钮结果如下
点击下方按钮结果
源代码是github上面的提问来的，只是我运行好像有点问题，就小修改了下
