安裝webview包
使用的是：react-native-webview
npm install react-native-webview --save
ReactNative
webview設(shè)置:
<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:要執(zhí)行的js代碼
- 如果沒有笔链，可以注釋掉當(dāng)前行段只。
- 如果有：類似于這種格式：
// javascript后執(zhí)行是要執(zhí)行的js代碼，可以做一些初始化內(nèi)容如window.env = release等鉴扫，也可以調(diào)用js的方法赞枕。
var injectedJS = 'javascript:JSClass.method();';
也可以使用webview主動(dòng)調(diào)用：
this.webview.injectJavaScript('javascript:JSClass.method();');
webview的幾個(gè)相關(guān)方法
- onMessage接收H5發(fā)送來的消息
- 注意下面方法中的webviewload(),將window.postMessage注入給了js，那么js就可以用window.postMessage()向RN發(fā)送消息了
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發(fā)送來的消息
console.log('接收H5發(fā)來的消息onMessage', event.nativeEvent.data);
const key = 'close';
switch(key){
case 'close'://關(guān)閉當(dāng)前頁面
break;
case 'photo':// 打開相冊相機(jī)
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發(fā)送消息
this.webview.postMessage('RN向H5發(fā)送的消息');
}
onError = (err) => {
console.log('onError', err);
}
renderError = (err) => {
console.log('renderError', err);
}
H5
- 接收webview注入的信息injectedJavaScript={injectedJS}坪创，相當(dāng)于在<script>中直接寫代碼
- 接收RN發(fā)送過來的消息document.addEventListener("message", function (event){})炕婶，在RN那里是this.webview.postMessage('RN向H5發(fā)送的消息');
- H5向RN發(fā)送消息：window.postMessage('H5向rn發(fā)送的消息');
<!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發(fā)送過來的消息
document.addEventListener("message", function (event) {
// 展示rn發(fā)送來的消息
alert(event.data)
// 展示注入的數(shù)據(jù)
alert(window.token);
// 向rn發(fā)送消息
window.postMessage('H5向rn發(fā)送的消息');
});
}
</script>
</body>
</html>
