React Native 文件压缩与解压缩插件

一：介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能，都为IDE开发平台提供封装好的插件，以便项目开发使用。

另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享iOS、Android两个版本，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。这篇文章重点介绍压缩和解压缩插件的开发与使用。

源码Demo获取方法

如果需要React Native压缩和解压缩插件源码demo，欢迎关注 【网罗开发】微信公众号，回复【68】便可领取。

二：实现思路分析

文件的压缩和解压缩插件需要引入SSZipArchive封装的类，在封装的类中实现文件的压缩功能和文件解压缩功能，在RNZipArchive类中实现RNZASSZipArchiveDelegate代理。

具体的实现思路如下：

1. 新建PhotosManage类，实现RCTBridgeModule协议
2. 添加RCT_EXPORT_MODULE()宏
3. 添加React Native跟控制器
4. 声明被JavaScript 调用的方法
5. 实现文件解压缩
6. 实现文件压缩
7. Javascript调用浏览器方法

三：实现源码分析

实现源码分析是根据上面列出的具体实现思路来为大家解刨内部的实现流程及核心代码分析。

1. 新建RNZipArchive类，实现RCTBridgeModule协议

新建继承NSObject的RNZipArchive类，并实现RCTBridgeModule协议

代码语言：javascript复制

// RNZipArchive.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface RNZipArchive : NSObject<RCTBridgeModule, RNZASSZipArchiveDelegate>
@end

2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议，RNZipArchive的类需要包含RCT_EXPORT_MODULE()宏。

并在这个宏里面添加一个参数“RNZipArchive”用来指定在 JavaScript 中访问这个模块的名字。

如果你不指定，默认就会使用这个 Objective-C 类的名字。

如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。

代码语言：javascript复制

// RNZipArchive.m
#import "RNZipArchive.h"
@implementation RNZipArchive
RCT_EXPORT_MODULE(RNZipArchive);
@end

3. 添加React Native跟控制器

如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下：

代码语言：javascript复制

// RNZipArchive.m
#import <React/RCTUtils.h>

引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可

代码语言：javascript复制

UIViewController *vc = RCTPresentedViewController();

4. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。下面通过举例来展示声明的方法，通过RCT_EXPORT_METHOD()宏来实现：

代码语言：javascript复制

// RNZipArchive.m
#import "RNZipArchive.h"
#import <React/RCTUtils.h>
@implementation RNZipArchive
RCT_EXPORT_MODULE(RNZipArchive);

RCT_EXPORT_METHOD(decompression:(NSDictionary *)arguments
        withCompletionHandler:(RCTResponseSenderBlock)completion
               failureHandler:(RCTResponseSenderBlock)failure)
{
    NSLog(@"调起解压缩方法");
}

RCT_EXPORT_METHOD(compress:(NSDictionary *)arguments
   withCompletionHandler:(RCTResponseSenderBlock)completion
          failureHandler:(RCTResponseSenderBlock)failure)
{
    NSLog(@"调起压缩方法");
}
@end

5. 实现文件解压缩

实现文件压缩RNZASSZipArchiveDelegate需要实现代理方法，根据传入的srcPath压缩文件路径和desPath解压缩后入的路径调用RNZASSZipArchive类的unzipFileAtPath方法。核心源码如下：

代码语言：javascript复制

NSString *srcPath = [self handleFilePath:arguments[@"srcPath"]];
NSString *desPath = [self handleFilePath:arguments[@"desPath"]];
BOOL success = [RNZASSZipArchive unzipFileAtPath:srcPath toDestination:desPath delegate:self];

6. 实现文件压缩

实现文件压缩功能和解压缩功能类似，唯一的区别是，根据传入的等待压缩的文件路径desPath调用RNZASSZipArchive类方法，将压缩后的文件存入srcPath路径下。这里desPath等待压缩的文件可能是一个路径，也可能是多个路径，如果是多个路径，就以数组的形式传入。核心源码如下：

代码语言：javascript复制

NSString *srcPath = [self handleFilePath:arguments[@"srcPath"]];
NSString *desPath = [self handleFilePath:arguments[@"desPath"]];
//[self zipArchiveProgressEvent:0 total:1 filePath:destinationPath]; // force 0%
NSFileManager *fileManager = [[NSFileManager alloc] init];
BOOL isDir;
BOOL success;
[fileManager fileExistsAtPath:srcPath isDirectory:&isDir];
if (isDir) {
    success = [RNZASSZipArchive createZipFileAtPath:desPath withContentsOfDirectory:srcPath];
} else {
    success = [RNZASSZipArchive createZipFileAtPath:desPath withFilesAtPaths:@[srcPath]];
}

7. Javascript调用浏览器方法

现在从 Javascript 里可以这样调用这个方法：

代码语言：javascript复制

import { NativeModules } from "react-native";
const FileoperationPlugin = NativeModules.RNZipArchive;
//实现文件的压缩
FileoperationPlugin.compress({srcPath:"defaults://check.png",desPath:"defaults://check.zip"},(msg) => {
                                         Alert.alert(JSON.stringify(msg));

                                         },(err) => {
                                         Alert.alert(JSON.stringify(err));
                                         });
//实现文件的解压缩
FileoperationPlugin.decompression({srcPath:"defaults://check.zip",desPath:"defaults://test"},(msg) => {
                                         Alert.alert(JSON.stringify(msg));

                                         },(err) => {
                                         Alert.alert(JSON.stringify(err));
                                         });

react linux hive 文件存储 javascript

0 人点赞