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