react-native WebVIew消息传递

onMessage
在 webview 内部的网页中调用 window.postMessage 方法时可以触发此属性对应的函数，从而实现网页和 RN 之间的数据交换。设置此属性的同时会在 webview 中注入一个 postMessage 的全局函数并覆盖可能已经存在的同名实现。

网页端的 window.postMessage 只发送一个参数 data，此参数封装在 RN 端的 event 对象中，即 event.nativeEvent.data。data 只能是一个字符串。

类型必填
function 否
我们直接调用postMessage会发现h5中消息不能传递给RN，这是由于版本升级，导致老的api调用的时候会出现一些问题，在github上的issue里有的说在setTimeout的回调函数中使用postMessage方法可以传递消息，但是自己亲测这样做没有作用，然后在新文档的issue中找到下面这样的一个回复，成功解决了问题

image.png

安卓端webview使用本地文件路径如下：
在。。。AwesomeProject\android\app\src\main目录下新建一个assets目录，里面存放h5代码，source中的引用路径为：file:///android_asset/h5/index.html
在ios平台上，引用本地的h5可以在项目src文件夹下建相关目录，使用require('相对路径')的方式引入
简单示例代码如下：
h5：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./build/calendar.css">
    <style>
        .btn{
            background: #f00;color:#fff
        }
    </style>
</head>
<body style="background:#ddd;">
    <div style="text-align: center">
        <button id="button" onclick="send()">发送数据到react native</button>
        <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
    </div>
</body>
<script>
    var data = 0;
    function send () {
        data += 100;
        window.ReactNativeWebView.postMessage("Hello React");
    }
    window.onload = function () {
        document.addEventListener('message', function (e) {
            document.getElementById('data').textContent = e.data;
        });
    }
</script>
</html>

RN:

import React from 'react'
import {View, Button, Text, AsyncStorage} from 'react-native'
import {WebView} from 'react-native-webview'
import {decrement, increment} from "../../store/action";
import { SwitchActions } from "react-navigation";

class HomeScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            webViewData: 0
        }
        this.data = 0
    }
    sendMessage() {
        this.refs.webview.postMessage(++this.data);
    }
    handleMessage(e) {
        this.setState({webViewData: e.nativeEvent.data});
    }
    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <WebView
                ref={'webview'}
                source={{uri: 'file:///android_asset/h5/index.html'}}
                style={{width:375, height:120, backgroundColor: '#eee'}}
                onMessage={(event) => {
                    // alert(e.nativeEvent.data)
                    console.log(event.nativeEvent)
                    this.handleMessage(event)
                }}/>
                <Text>来自webview的数据 : {this.state.webViewData}</Text>
                <Text onPress={() => {
                    this.sendMessage()
                }}>发送数据到WebView</Text>
            </View>
        )
    }
}

export default HomeScreen

最后编辑于：2020.01.10 17:02:27