React Native与Vue的H5交互_vue和h5交互_丁国栋-

irpas 02-07 1158

一、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设置

<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={() => <Spinner isVisible={true}/>} 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方法