|
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}}
onError={()=>{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>
);
}
}
|