ReactNative项目中集成旧版本的Angular 1.x的项目

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：


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',

}}

这样引用

如下图：



iOS中

在iOS中需要使用xcode打开此RN项目，然后在项目名称（eg. ReactNativeSinooa）项目右击选择

Add Files to "ReactNativeSinooa"...

然后找到www文件夹的位置，并且一定要在【options】选项这选择

Create folder references

选项。



然后选择完成之后，在项目路径下会出现蓝色的

www

文件夹。并且当

android/app/src/main/assets/

路径下的www文件改变后，它也会跟着改变。



引用的时候要

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);
...
}