RN,webview里onMessage属性的使用

最新推荐文章于 2024-07-10 09:53:01 发布

Wooyulin

最新推荐文章于 2024-07-10 09:53:01 发布

阅读量4.8k

点赞数

分类专栏： RN 文章标签： RN webview

本文链接：https://blog.csdn.net/Wooyulin/article/details/60965655

版权

RN 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因为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>