javascript React Native与Vue的H5交互

一、React Native简介：

1、React Native采用JavaScript 框架，将 React 基础抽象组件渲染为原生平台UI组件，像View, Text 以及 Image等，可直接映射渲染为对应平台的原生UI组件

2、通过 React 的声明式组件机制和 JavaScript 代码，现有的原生代码和api可以完美地封装嵌合到 React 组件中

3.、React Native创建的原生应用，经常采用混合开发方式嵌入H5

二、React端主要涉及一下方法：

React Native -> Web: The injectedJavaScript prop

React Native -> Web: The injectJavaScript method

Web -> React Native: The postMessage method and onMessage prop

涉及到的主要函数有：onMessage、window.ReactNativeWebView.postMessage、injectedJavaScript、injectJavaScript

1、injectedJavaScript： 在网页第一次加载完成后会立即被Html执行（之后reload都不会再执行），我们需要将这个属性设置为一串js代码段字符串。在这里我们可以如同在html中一样调用页面的的函数。

2、injectJavaScript： RN客户端可以通过webview直接调用这个函数，参数是字符串，调用这个方法后，会在html端以js的方式执行参数中的内容。

3、Html向RN通信 html作为发送方，通过window.ReactNativeWebView.postMessage发送消息，RN端通过onMessage接收

三、话不多说，直接实操，具体的核心代码如下：

1、react native端的配置

1.1、 webview设置

scrollEnabled={true}

bounces={true}

ref={ref => this.web = ref}

source={{uri: this.props.url}}

mixedContentMode='always'

onMessage={({nativeEvent: state}) => {

// 用户自定义数据

this.onCustomMessage(state.data);

}}

//此方法可不添加

injectedJavaScript={`(function() {

window.postMessage = function(data) {

window.ReactNativeWebView.postMessage(data);

};

})()`}

javaScriptEnabled={true}//指定WebView中是否启用JavaScript

scalesPageToFit={false}// 布尔值，控制网页内容是否自动适配视图的大小，同时启用用户缩放功能。默认为true。

startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图

renderLoading={() => }

renderError={() => this.loadingErrorView()}

onError={(e) => {

if (e && deviceInfo.isAndroid){

this.setState({loadLocalErrorView:true})

}

}}

/>

1.2、react native端onMessage消息处理

/*App开放接口给H5调用*/

onCustomMessage(data) {

if (data){

//接收H5传的参数

let object = JSON.parse(data);

switch (object.methodName) {

case webApi.getToken: {

//构造要传递H5的参数

let responseData = {

methodName: object.methodName,

resId: object.reqId,

data: {token: AppManager.instance().getToken() || ''},

};

// 调用H5接口，发送消息到H5

this.web && this.web.injectJavaScript(`window.aaa.getToken(${JSON.stringify(responseData)})`);

}

break;

}

}

};

2、H5端的配置

2.1、H5调用RN端方法

let requestData = {

methodName: 'getToken', // 调用RN传递的方法名称

reqId: new Date().getTime(), // 调用RN获取的时间戳，精确到毫秒

params: {} // 调用RN传递的实际参数

}

//调用RN的getToken方法

window.ReactNativeWebView.postMessage(JSON.stringify(requestData))

2.2、H5暴露方法供RN端调用

window.sigWebApi.getToken = (res) => {

//RN调用H5的getToken方法

this.$store.state.token = JSON.parse(JSON.stringify(res)).data.token

this.$store.state.billCreateIp = JSON.parse(JSON.stringify(res)).ip

}

2.3、sigWebApi为Vue对象

window.sigWebApi.getDeviceInfo中的sigWebApi，是将vue挂在window 对象上，实现能调用组件和方法，也可以直接将方法挂载在window对象上。

window.sigWebApi = new Vue({

el: '#app',

router,

store,

components: { App },

template: ''

})

相关文章

 您阅读本篇文章共花了：