RN,webview里onMessage属性的使用

来源：互联网发布：绵阳涪城编程培训学校编辑：程序博客网时间：2024/06/05 06:33

因为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上面的提问来的，只是我运行好像有点问题，就小修改了下

0 0