今天学习下React NativeWeb端的基本交互,暂时涉及到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
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
<!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