安装webview包
使用的是：react-native-webview
npm install react-native-webview --save
ReactNative
webview设置:
<WebView
originWhitelist={['*']}
useWebKit
bounces={false}
key={`__webViewKey_${key}`}
ref={(ref) => { this.webview = ref; }}
userAgent={userAgent}
javaScriptEnabled
domStorageEnabled={false}
onMessage={this.onMessage.bind(this)}
injectedJavaScript={injectedJS}
source={source}
onLoad={this.webviewload.bind(this)}
onLoadEnd={this.onLoadEnd.bind(this)}
onError={this.onError}
renderError={this.renderError}
/>
injectedJavaScript:要执行的js代码
- 如果没有，可以注释掉当前行。
- 如果有：类似于这种格式：
// javascript后执行是要执行的js代码，可以做一些初始化内容如window.env = release等，也可以调用js的方法。
var injectedJS = 'javascript:JSClass.method();';
也可以使用webview主动调用：
this.webview.injectJavaScript('javascript:JSClass.method();');
webview的几个相关方法
- onMessage接收H5发送来的消息
- 注意下面方法中的webviewload(),将window.postMessage注入给了js，那么js就可以用window.postMessage()向RN发送消息了
constructor(props) {
super(props);
this.state = {
// source: { uri: `http://www.baidu.com` },
source: { uri: 'file:///android_asset/h5plugin/Test.html' },
userAgent: '',
key: 'key',
isShowHeader: true,
headerTitle: 'H5插件',
}
}
onMessage = (event) => {
// 接受h5发送来的消息
console.log('接收H5发来的消息onMessage', event.nativeEvent.data);
const key = 'close';
switch(key){
case 'close'://关闭当前页面
break;
case 'photo':// 打开相册相机
break;
case 'phone':// 拨号
break;
default:
}
}
getInjectedJS = () => {
const token = '123';
const projectId = '456';
return `
window.token = '${token}';
window.projectId = '${projectId}';
`;
}
webviewload() {
this.webview.injectJavaScript(`(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()`);
}
onLoadEnd = () => {
// 向H5发送消息
this.webview.postMessage('RN向H5发送的消息');
}
onError = (err) => {
console.log('onError', err);
}
renderError = (err) => {
console.log('renderError', err);
}
H5
- 接收webview注入的信息injectedJavaScript={injectedJS}，相当于在<script>中直接写代码
- 接收RN发送过来的消息document.addEventListener("message", function (event){})，在RN那里是this.webview.postMessage('RN向H5发送的消息');
- H5向RN发送消息：window.postMessage('H5向rn发送的消息');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H5pluginTest</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0
}
</style>
</head>
<body>
<div id="model" style="width:100%; height:100%;text-align:left;">
h5页面
</div>
<script>
window.onload = function () {
//接受rn发送过来的消息
document.addEventListener("message", function (event) {
// 展示rn发送来的消息
alert(event.data)
// 展示注入的数据
alert(window.token);
// 向rn发送消息
window.postMessage('H5向rn发送的消息');
});
}
</script>
</body>
</html>
网友评论