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.postMessage("Hello React");
}
window.onload = function () {
alert(111);
}
</script>
</html>RN代码如下：
import React, { Component } from 'react';
import {
WebView,
NativeModules,
AppRegistry,
Dimensions,
View,
Image,
Text,
} from 'react-native';
import NavigationBar from '../../component/NavBarComponent';
import BehaviorUtils from '../../util/BehaviorUtil';
import publicStyle from '../../util/publicStyle';
var screenWidth = Dimensions.get('window').width;
var screenHeight = Dimensions.get('window').height;
var nativeModule = NativeModules.OpenHomeModule;
var publicModule = NativeModules.PublicModule;
/**
* desc:H5页面
* author:jiaqch@neusoft.com
* date:2019-09-03
*/
export default class Pageh5 extends Component<Props>{
constructor(props){
super(props);
this.state = {
hasNet:true,
}
}
//返回首页
openHomePage(){
let backFlag = this.props.backFlag;
if(backFlag && backFlag=='1'){
this.back();
}else{
nativeModule.openHomePage();
}
}
//返回
back(){
const{navigator} = this.props;
if(navigator){
navigator.pop();
}
}
componentDidMount() {
let secServiceCode = this.props.userInfo[0].secServiceCode;
//二级服务代码不空的情况下跟踪
if(secServiceCode && secServiceCode!=""){
let userId = this.props.userInfo[0].userId;
let cityCode = this.props.userInfo[0].cityCode;
let phoneNumber = this.props.userInfo[0].phoneNumber;
let deviceId = this.props.userInfo[0].deviceId;
let ipAddress = this.props.userInfo[0].ipAddress;
BehaviorUtils.sendBmgjData(userId,secServiceCode,"1","点击",cityCode,phoneNumber,deviceId,ipAddress);
}
}
onMessage(e){
console.log('serviceShare:...');
publicModule.serviceShare(e.nativeEvent.data);
}
render() {
return (
<View style={{flex: 1,backgroundColor:'#fff'}}>
<NavigationBar title={this.props.userInfo[0].secServiceName}
leftAction={()=>{this.openHomePage()}}>
</NavigationBar>
<View style={{flex: 1}}>
{
this.state.hasNet?
<WebView
ref='webview'
useWebKit={true}
startInLoadingState={true}
domStorageEnabled={true}//开启dom存贮
javaScriptEnabled={true}//开启js
scalesPageToFit={true}
geolocationEnabled={true}
mixedContentMode={'always'}
source={{uri:this.props.userInfo[0].serviceUrl}}
one rror={()=>{this.setState({hasNet:false})}}
onMessage={this.onMessage.bind(this)}
/>:
<View style={{height:screenHeight-100,justifyContent:'center',alignItems:'center'}}>
<Image source={require('../../image/gjcx/nowifi.png')} style={{width:181,height:164}}/>
<Text style={[publicStyle.font14_GrayR,{marginTop:10}]}>网络请求失败</Text>
<Text style={[publicStyle.font14_GrayR,{marginTop:5}]}>请检查你的网络</Text>
</View>
}
</View>
</View>
);
}
}