少停 > React-Native与Web的基本交互

React-Native与Web的基本交互

2019-04-22

移动端学习

今天学习下React Native与Web端的基本交互,暂时涉及到RN向Web端传值,Web向RN端传值,因为现在转为Flutter开发,所以这一块暂时只能涉及到这里.其中的Web端采用本地html页面.

本文设计的交互主要靠webView的onMessage和postMessage.
在RN端发送数据给Web,主要依靠调用webView的potsMessage方法实现,
如:

1
this.refs.webview.postMessage(this.data);

接收Web端的数据靠的是WebView的onMessage方法

1
2
3
onMessage={(e) => {
                        this.handleMessage(e)
                    }}

下面是完整代码:

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    WebView
} from 'react-native';

export default class Web extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            webViewData: ''
        }
        this.data = '我是RN传给web端的参数';
    }

    sendMessage() {
        this.refs.webview.postMessage(this.data);
    }


    handleMessage(e) {
        this.setState({webViewData: e.nativeEvent.data});
    }


    render() {
        return (
            <View style={styles.container}>
                {/*web*/}
                <View style={{width: 375, height: 220}}>
                    <WebView
                        ref={'webview'}
                        source={require('./test.html')}
                        style={{width: 375, height: 220}}
                        onMessage={(e) => {
                            this.handleMessage(e)
                        }}
                    />
                </View>
                {/*RN*/}
                <Text>来自webview的数据 : {this.state.webViewData}</Text>
                <Text onPress={() => {
                    this.sendMessage()
                }}>
                    发送数据到WebView
                </Text>
            </View>

        )

    }

}



const styles = StyleSheet.create({

    container: {

        flex: 1,

        marginTop: 22,

        backgroundColor: '#F5FCFF',

    },



});

而在html里面,需要监听数据,通过:

1
2
3
document.addEventListener('message', function (e) {
            document.getElementById('data').textContent = e.data;
        });

发送数据通过:

1
2
window.postMessage(data);

完整代码如下:

test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p style="text-align: center">
    <button id="button">发送数据到react native</button>
<p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</p>
<script>
    var data = 0;
    function sendData(data) {
        if (window.originalPostMessage) {
            window.postMessage(data);
        } else {
            throw Error('postMessage接口还未注入');
        }
    }
    window.onload = function () {
        document.addEventListener('message', function (e) {
            document.getElementById('data').textContent = e.data;
        });
        document.getElementById('button').onclick = function () {
            data += 11;
            sendData(data);
        }
    }

</script>

</body>

</html>


效果图:
webRN-result.png

源码

另外:在未来的版本中,可能会移除自带的webView,改用在外部库里引用的方式.同时,在三方库中,也有webView-bridge库使用,cookie库使用.
react-native-webview
webView-bridge
cookie