1. 背景
由于新版本（简称2.0版本）的APP使用新技术ReactNative新技术，并且时间紧张，只有公共部分，如登录、联系人等公共部分使用ReactNative重新做的，但是之前的一些旧模块（发文、收文、出差、签报、信息发布等）就没有时间来重新做了，只能是融合之前旧版本（简称1.x版本）angular技术做的的模块。这也就是今天需要记录的ReactNative集成H5（angular开发的APP模块）。
2. 主要技术和调试工具
- ReactNative的WebView
- 可以捕获webview中发出的请求的调试工具： spy-debugger
用这个感觉不错，就是有时候不太好使，多试几次就好了
3. 集成具体实行记录
WebView技术可以打开的是网址，或者HTML。
3.1 angular项目的处理
由于之前angular 1.x版本项目打包之前的一个首要工作就是使用gulp命令将项目打包为静态的HTML文件(www文件)，所以webview中可以直接使用www文件中的index.html文件即可。
下面是angular项目build成静态HTML：
gulp.png
3.2 ReactNative中WebView的使用
WebView中的使用很简单，如果只是测试，可以将www随意放在项目中的一个目录下，保证可以引用到，然后source={require('../../src/www/index.html')}即可。但是如果iOS和安卓分别打正式包的话，就需要分别放在不同的位置，并且使用不同的引用方式才可以了。
先看下下面的使用：
<WebView
ref={webview => (this.webview = webview)}
automaticallyAdjustContentInsets={false}
style={styles.webView}
mixedContentMode="always"
source={{
//正式
uri:
Platform.OS === 'ios'
? 'www/index.html'
: 'file:///android_asset/www/index.html',
}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
onNavigationStateChange={this.onNavigationStateChange}
injectedJavaScript={this.initH5Script}
startInLoadingState={true}
scalesPageToFit={true}
onMessage={this.onMessage}
renderError={() => {
return (
<View>
<Text>renderError回调了，出现错误</Text>
</View>
);
}}
onLoad={() => {
console.log(`injectedJavaScript: ${this.initH5Script}`);
}}
/>
3.3. www文件的不同引用方式
-
Android中
把www文件放到android/app/src/main/assets/就好，引用的时候要source={{ uri: 'file:///android_asset/www/index.html', }}这样引用
如下图：
android.png
-
iOS中
在iOS中需要使用xcode打开此RN项目，然后在项目名称（eg. ReactNativeSinooa）项目右击选择Add Files to "ReactNativeSinooa"...
iOS1.png
然后找到www文件夹的位置，并且一定要在【options】选项这选择Create folder references选项。
iOS2.png
然后选择完成之后，在项目路径下会出现蓝色的www文件夹。并且当android/app/src/main/assets/路径下的www文件改变后，它也会跟着改变。
iOS3.png
引用的时候要source={{ uri:'www/index.html', }}这样引用，即可。
3.3 RN与H5的通信
当然这样做，只是把原来的APP远不引用过来了，想要做到上面说的只是引用几个业务模块，还需要对angular的代码进行剪裁，只留下需要的业务代码部分，并且这其中表头导航的问题，涉及到RN与H5的通信，这个很好找，在官网上有详细的说明，下面我只简单的介绍一下。通信这个不是难点，只需要用上就可以实现。
3.3.1 RN向H5发送消息
/**
* 向H5中注入脚本
*/
injectJS = script => {
const script = `window.localStorage.setItem('userId', "${this.props.userId}")`;
if (this.webview) {
this.webview.injectJavaScript(script);
}
};
3.3.2 H5向RN发送消息
/**
* H5
* 用于RN部分查看文件
*/
function setMessageToRn(file) {
var message = {
type: "file",
id: "sinoFile",
status: "in",
title: "查看文件",
file: file
};
window.postMessage && window.postMessage(JSON.stringify(message));
}
/**
* Rn
* 接收HTML发出的数据
*/
onMessage = e => {
const messageStr = e.nativeEvent.data;
const message = JSON.parse(messageStr);
...
}
网友评论