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:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

Windows上的程序员神器Cmder 装逼和提高工作效率两不误

41910
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

创建灵活的toast通知,包括内嵌图片及更多的内容,不在局限于之前Windows 8.1和Windows Phone 8.1提供的toast模板。

13660
来自专栏木子昭的博客

macOS Serria安装配置QT5.5

最近比较迷C++,打算用qt写一个带界面的小游戏. 在deepin应用商店一键安装qt, 没有出现任何问题(点赞deepin!),但在Mac安装qt的时候遇...

38340
来自专栏程序你好

三分钟让你了解什么是Web开发?

9730
来自专栏yang0range

React Native在Android当中实践(五)——常见问题

这个问题是由于ReactNative兼容64位Android手机导致的。 解决办法: 1.在项目的根目录的 gradle.properties 里面添加一行...

13620
来自专栏地方网络工作室的专栏

打造前端MAC工作站(四)配置 Atom 编辑器

打造前端MAC工作站(四)配置 Atom 编辑器 前言 前端工程师可选择的编辑器主要有 Atom、Sublime Text3、VS Code,三者风格差不多,你...

36060
来自专栏小巫技术博客

React Native 音频录制例子来解惑入门

19230
来自专栏听雨堂

PowerPoint发布及链接图片的处理

        用PPT做了一个纯播放类的课件,希望发布到CD上,首先想到的是打包,找到一个PowerPoint Slide Show Converter的程序...

20080
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:爱上 ThemeRoller

Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo最方便使用的特点之一就是兼容ThemeRoller。ThemeRoller 是一个创建独特的...

20970
来自专栏极乐技术社区

微信小程序跳坑指南系列《一》:新坑30枚

1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间,一个中文字等于2个字符。 2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名,请更...

262100

扫码关注云+社区

领取腾讯云代金券