iOS端React Native差异化增量更新的实现方法

前言

作为一名iOS原生开发工程师,通过一个礼拜的面试之后发现,原来并不想学的react-native真的是火的一塌糊涂,坐标:杭州,很多公司招聘iOS开发除了原来的OC和Swift,多了一门新语言:react-native,真的是要人老命啊,Swift4.0刚刚看完,又得花时间学RN。入职之后也开始学react-native,算是小白一枚,下面是我的个人总结,有大神看出错误,请不要打我或者骂我,联系我邮箱dadadoubi@qq.com。

RN具有的优势有很多,跨平台开发,一套代码Android和iOS通用,热更新,不用一直等苹果爸爸慢吞吞的审核流程,所谓工欲善其事,必先利其器,RN的热更新部署肯定得学下,今天就总结一下一个刚学RN的小白对热更新的理解。

个人理解,RN的热更新有点类似App的版本更新,app内版本号与server端匹配,来判断是否要更新,替换加载的jsbundle文件,然后加载新的jsbundle文件来实现版本更新,那么实质上就是把app内要加载的jsbundle文件替换掉就OK了。

原理分析

简单介绍了一下原理,那么废话不多说,直接开始写了,这篇文章主要讲的是前面两步:jsbundle的打包命令和差异化的比较

react-native打ios离线包

打包命令说明

react-native bundle
Options:
--entry-file <path>   Path to the root JS file, either absolute or relative to JS root
(一般为index.js文件)
--platform [string]   Either "ios" or "android"
(RN入口文件的路径, 绝对路径或相对路径)
--transformer [string]  Specify a custom transformer to be used

--dev [boolean]    If false, warnings are disabled and the bundle is minified
(如果为false, 警告会不显示并且打出的包的大小会变小,默认为--dev true)
--prepack     When passed, the output bundle will use the Prepack format.
(当通过时, 打包输出将使用Prepack格式化,默认为--prepack false)
--bridge-config [string]  File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
(使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json)
 --bundle-output <string>  File name where to store the resulting bundle, ex. /tmp/groups.bundle
(打包后的文件输出目录, 例: /tmp/groups.bundle)
--bundle-encoding [string] Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).[default: "utf8"]
(打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.默认为utf-8格式)
---sourcemap-output [string] File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
(生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map)
--assets-dest [string]  Directory name where to store assets referenced in the bundle
(打包时图片资源的存储路径)
--verbose     Enables logging
(显示打包过程)
--reset-cache    Removes cached files
(移除缓存文件)
--config [string]   Path to the CLI configuration file
(命令行的配置文件路径)

事实上上面打包命令说明不看也没事,下面是具体操作

1. cd [项目路径]

2.  在react-native根目录下的ios目录下新建bundle文件夹(mkdir ./ios/bundle)(注意:输入打包命令前必须先新建bundle文件夹)

3. 打包命令:react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle/

4. 结果展示![clipboard.png](/img/bV8rS9)

当rn项目中有引用图片资源时,打包出来为下面示意图(如果图片资源是在xcode工程内部时则不会生成)

patches.pad差异化文件终端生成方案

利用google的diff文件(资料查出来,这个比较受欢迎,同时也兼容Objective-C),github地址:https://github.com/google/dif...

1.终端输入:git clone https://github.com/LiuC520/nodediffpatch.git

2.终端输入:cd nodediffpatch && npm i

3.终端输入:sudo npm link

4.把新旧文件放入nodediffpatch/patch目录下

5.终端输入:patbundle patch -o test01old.jsbundle -n test01new.jsbundle

这样,用终端的生成差异化文件就OK了。

iOS实现生成差异化文件

首先,得先把diff-match-patch下载下来,需要集成它

集成有优化方案有大神知道的话跟我说一下,我反正是用很粗糙的做法,将它的类直接拖入你的工程中,不知道的也可以用我的方式。简单在,直接,嘿嘿!

把这些文件拖入到工程中,选择create group方式,(别喷,要脸,是在不知道怎么集成)“集成”后的项目结构

然后导入(#import "DiffMatchPatch.h")就可以开始用了,下面演示用l1.txt和l2.txt文件来展示,可以比较直观的看出效果

l1.txt文本:123

l2.txt文本:12345

- (void)demo1{
 // 获取l1.txt文件路径
 NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"];
 // 根据l1.txt文件路径获取data内容
 NSData *data01 = [NSData dataWithContentsOfFile:path01];
 // 将data内容转换成字符串格式
 NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
 // 获取l2.txt文件路径
 NSString *path02 = [[NSBundle mainBundle]pathForResource:@"l2" ofType:@"txt"];
 // 根据l2.txt文件路径获取data内容
 NSData *data02 = [NSData dataWithContentsOfFile:path02];
 // 将data内容转换成字符串格式
 NSString *str02 = [[NSString alloc] initWithData:data02 encoding:NSUTF8StringEncoding];
 // 创建DiffMatchPatch工具类对象
 DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
 // 对比文件内容
 // 执行该语句之后会在bundle目录下生成patches.bat文件(差异补丁文件)
 NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES];
 // 生成差异补丁包
 NSArray *patchesArr1 = [patch patch_makeFromDiffs:patchesArr];
 // 解析补丁包
 NSArray *newArray = [patch patch_apply:patchesArr1 toString:str01];
 //写入到新文件(注意:这边为了在PC端更加直观的看,直接写入到绝对路径)
 BOOL isTrue = [newArray[0] writeToFile:@"/Users/devil/Desktop/自己的/RNPlatForm/ios/l1.txt" atomically:YES encoding:NSUTF8StringEncoding error:nil];
 if (isTrue) {
 NSLog(@"写入成功");
 }else{
 NSLog(@"写入失败");
 }
}

执行代码后:

l1.txt文本:12345

当然,你可以打印一下path01路径字符串,在这个路径下会生成patches.pat差异化文件,我执行的时候打断点发现

NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES];

执行该语句之后生成,但是用[[NSBundle mainBundle]pathForResource:@"patches" ofType:@"pat"];访问不到文件,有大神知道什么原因可以跟我说下。

iOS实现patches.pat与旧jsbundle离线包合并得到新的jsbundle离线包

- (void)demo2{
 // 获取l1.txt文件路径
 NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"];
 // 根据l1.txt文件路径获取data内容
 NSData *data01 = [NSData dataWithContentsOfFile:path01];
 // 将data内容转换成字符串格式
 NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
 // 创建DiffMatchPatch工具类对象
 DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
 // 获取差异化文件包路径
 NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"patches.pat" ofType:nil];
 //获取差异化文件内容
 NSData *patchesData = [NSData dataWithContentsOfFile:patchesPath];
 //解析差异化文件内容
 NSString *patchesStr = [[NSString alloc]initWithData:patchesData encoding:NSUTF8StringEncoding];
 //转换pat
 NSMutableArray *patchesArr = [patch patch_fromText:patchesStr error:nil];
 // 解析补丁包
 NSArray *newArray = [patch patch_apply:patchesArr toString:str01];
 //获取新文件路径
// NSString *newFilePath = [[NSBundle mainBundle]pathForResource:@"text3" ofType:@"txt"];
 //写入到新文件(注意:这边为了在PC端更加直观的看,直接写入到绝对路径)
 BOOL isTrue = [newArray[0] writeToFile:@"/Users/devil/Desktop/自己的/RNPlatForm/ios/text3.txt" atomically:YES encoding:NSUTF8StringEncoding error:nil];
 if (isTrue) {
 NSLog(@"写入成功");
 }else{
 NSLog(@"写入失败");
 }
}

实现本地更新离线包

//创建两个按钮,第一个按钮跳转RN界面,加载jsbundle包,第二个按钮负责更新jsbundle包
UIButton *btn4 = [[UIButton alloc]init];
 [btn4 setTitle:@"第五个" forState:UIControlStateNormal];
 [btn4 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
 btn4.frame = CGRectMake(40, 170, 60, 30);
 [btn4 addTarget:self action:@selector(clickFifth) forControlEvents:UIControlEventTouchUpInside];
 [self.view addSubview:btn4];

 UIButton *btn5 = [[UIButton alloc]init];
 [btn5 setTitle:@"更新第五个界面" forState:UIControlStateNormal];
 [btn5 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
 btn5.frame = CGRectMake(40, 200, 60, 30);
 [btn5 addTarget:self action:@selector(demo2) forControlEvents:UIControlEventTouchUpInside];
 [self.view addSubview:btn5];
//btn4按钮点击事件
- (void)clickFifth{
 NSURL *jsCodeLocation;
 jsCodeLocation = [[NSBundle mainBundle]URLForResource:@"test01old" withExtension:@"jsbundle"];
 [self creactRNPath:jsCodeLocation moduleName:@"test01platcode"];
}

- (void)creactRNPath:(NSURL *)jsCodeLocation moduleName:(NSString *)moduleName{
 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
              moduleName:moduleName
            initialProperties:nil

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • React-Native 桥接iOS原生开发详解

    react-native的文档的原生模块中可以看到清洗的代码 传送门 接下来先说一下笔者的要实现的功能: 在iOS原生代码中集成高德导航,在RN中用JS去调用原声代码,并进行跳转, 接下来是笔者遇到的问题与不好理解的地方,写出来跟大家分享让大家少走弯路. 刚开始也是一头雾水且查资料也是到处都是但是都没有解决问题. iOS原生写法 在iOS中创建类继承NSObject(OC语言). //类的.h文件 #import <Foundation/Foundation.h> #import <Re

  • React Native中NavigatorIOS组件的简单使用详解

    一.NavigatorIOS组件介绍 1,组件说明 使用 NavigatorIOS 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进.后退.并且在页面上方会有个导航栏(可以隐藏). NavigatorIOS 组件本质上是对 UIKit navigation 的包装.使用 NavigatorIOS 进行路由切换,实际上就是调用 UIKit 的 navigation. NavigatorIOS 组件只支持 iOS 系统.React Native 还提供了一个 iOS 和 Android

  • React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)

    在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下 ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的. 今天我们来实现一个iOS和Android通用的上拉刷新功能. 下面简要介绍下我实现的思路. 思路: 1.常量定义: const moreText = "加载完毕"; //foot显示的文案 //页码 var pageNum = 1; /

  • React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • ios原生和react-native各种交互的示例代码

    需求:让一个表格视图中的cell能左滑删除,效果图如下: 目前RN中的ListView主要问题是复用,以及其他一些细节如索引视图.左滑删除.编辑等,要想在RN上自定义实现原生的这种效果尚有一定的问题,在必要时可以考虑使用原生的UITableView,数据从RN端传递 1.原生端编写表格控制器NativeTableViewController,暴露的属性如下 datas为表格数据源,另外一个为需要暴露给RN调用用方法. 2.框架只提供了暴露UIView给RN端的接口,所以需要制作一个中转UIVie

  • IOS React Native FlexBox详解及实例

    IOS React Native FlexBox详解及资料整理, # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 什么是 FlexBox 布局 在 html 中,界面的搭建都是采用 C

  • React-Native Android 与 IOS App使用一份代码实现方法

    React-Native  Android 与 IOS 共用代码 React-Native 开发的App, 所有组件iOS & Android 共用, 共享一份代码 包括一些自定义的组件, 如NavigationBar, TabBar, SegmentedControl, 使用字体图标, 具有一定的参考意义 主要专注于布局, 共享组件/代码, 以及一些React自带的组件, 如: ScrollView, TouchableOpacity, View, Text, ListView, Image,

  • React Native第三方平台分享的实例(Android,IOS双平台)

    本文主要介绍了React Native第三方平台分享的实例(Android,IOS双平台),分享给大家,具体如下: 源码已开源到Github,地址请点击:react-native-share[一行代码,双平台分享] 目前支持分享的平台有[QQ][QQ空间][微信][朋友圈][微博][FaceBook]  欢迎大家star,fork..... [ Android平台配置 ] 1. app目录下创建 libs 文件夹,添加依赖文件[直接复制源码中 libs 目录即可] 2. app / src /

  • react-native组件中NavigatorIOS和ListView结合使用的方法

    前言 本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先看效果 使用方法 index.ios.js import React, {Component} from 'react'; import { AppRegistry, NavigatorIOS } from 'react-native'; import NewsList from './components/

  • iOS端React Native差异化增量更新的实现方法

    前言 作为一名iOS原生开发工程师,通过一个礼拜的面试之后发现,原来并不想学的react-native真的是火的一塌糊涂,坐标:杭州,很多公司招聘iOS开发除了原来的OC和Swift,多了一门新语言:react-native,真的是要人老命啊,Swift4.0刚刚看完,又得花时间学RN.入职之后也开始学react-native,算是小白一枚,下面是我的个人总结,有大神看出错误,请不要打我或者骂我,联系我邮箱dadadoubi@qq.com. RN具有的优势有很多,跨平台开发,一套代码Androi

  • React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • 关于React Native使用axios进行网络请求的方法

    在前端开发中,能够完成数据请求的方式有很多,如Ajax.jQuery ajax.axios和fetch等.不过,随着技术的发展,现在能够看到的基本上也就axios和fetch两种. axios是一个基于Promise的Http网络库,可运行在浏览器端和Node.js中,Vue应用的网络请求基本都是使用它完成的.axios有很多优秀的特性,如支持请求的拦截和响应.取消请求.JSON自动转换.客户端防御XSRF等. 使用axios之前,需要先在项目中安装axios插件,安装命令如下. //npm n

  • 基于IOS端微信分享失效的踩坑及解决方法

    最近的一个公众号是基于vue的spa应用,在接入微信分享和微信语音的时候出现了:在Android上一切正常,但是在ios端调用wx.config的时候总是失败,去翻了官方文档也并没有找到解决方案,最后在测试中发现是因为初始化的时候传入的URL的问题.具体过程如下: 微信config接口配置,官方文档如下: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支

  • React Native项目中使用Lottie动画的方法

    Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果. 使用流程上,Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用官方提供的Bodymovin插件把动画导出成Json文件,而这个Json文件就是Lottie需要解析的动画源文件. 在React Native项目中使用Lottie动画,需

  • React Native 加载H5页面的实现方法

    目录 一.基本使用 1.1 RN向H5发送数据 1.2 H5向RN传递数据 1.3 双向传值 二.属性和方法 2.1 属性 2.2 方法 三.使用示例 3.1 加载外源网页信息 3.2 登陆场景 3.3 功能模块嵌入到 RN 中 3.4 完整示例 一.基本使用 作为目前流行的移动跨平台开发技术,React Native 提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架.使用React Native开发时,经常会遇到加载H5网页的需求,此时需要用到react-native-w

  • 在 React Native 中使用 CSS Modules的配置方法

    目录 安装依赖和配置 使用 示例 有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native.本文将介绍如何在 React Native 中使用 CSS Modules. 安装依赖和配置 首先安装 react-native-sass-transformer 使得我们可以在 React Native 应用中使用 sass 样式. yarn add react-native-sass-transformer sass -D 参考如下配置,修改 me

  • React Native可复用 UI分离布局组件和状态组件技巧

    目录 引言 包装 Context.Provider 作为父组件 使用 Context Hook 来实现子组件 使用 React 顶层 API 动态设置样式 复用 Context,实现其它子组件 抽取共同状态逻辑 自由组合父组件与子组件 示例 引言 单选,多选,是很常见的 UI 组件,这里以它们为例,来讲解如何分离布局组件和状态组件,以实现较好的复用性. 假如我们要实现如下需求: 这类 UI 有如下特点: 不管是单选还是多选,都可以有网格布局,我们可以把这个网格布局单独抽离出来,放到一个独立的组件

  • 详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

随机推荐