iOS--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两个版本，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。这篇文章重点介绍相册插件的开发与使用
二：实现思路分析
相册插件是需要实现打开相册、保存图片到相册、图片剪切、图片压缩等功能的实现。这些功能加通过在PhotosManage类中对应封装的方法来提供给Javascript开发使用。
具体的实现思路如下：
-
新建PhotosManage类，实现RCTBridgeModule协议
-
添加RCT_EXPORT_MODULE()宏
-
添加React Native跟控制器
-
声明被JavaScript 调用的方法
-
实现打开相册
-
实现保存图片到相册
-
实现图片剪切
-
实现图片压缩
-
Javascript调用浏览器方法
三：实现源码分析
实现源码分析是根据上面列出的具体实现思路来为大家解刨内部的实现流程及核心代码分析。
1. 新建PhotosManage类，实现RCTBridgeModule协议
新建继承NSObject的PhotosManage类，并实现RCTBridgeModule协议
// PhotosManage.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface PhotosManage : NSObject<RCTBridgeModule>
@end
2. 添加RCT_EXPORT_MODULE()宏
为了实现RCTBridgeModule协议，PhotosManage的类需要包含RCT_EXPORT_MODULE()宏。
并在这个宏里面添加一个参数“PhotosManage”用来指定在 JavaScript 中访问这个模块的名字。
如果你不指定，默认就会使用这个 Objective-C 类的名字。
如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。
// PhotosManage.m
#import "PhotosManage.h"
@implementation PhotosManage
RCT_EXPORT_MODULE(PhotosManage);
@end
3. 添加React Native跟控制器
如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下：
// PhotosManage.m
#import <React/RCTUtils.h>
引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可
UIViewController *vc = RCTPresentedViewController();
4. 声明被JavaScript 调用的方法
React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。下面通过举例来展示声明的方法，通过RCT_EXPORT_METHOD()宏来实现：
// PhotosManage.m
#import "PhotosManage.h"
#import <React/RCTUtils.h>
@implementation PhotosManage
RCT_EXPORT_MODULE(PhotosManage);
/**
打开相册
@return 选择图片的地址,缩略图
*/
RCT_EXPORT_METHOD(picture:(NSDictionary *)arguments
:(RCTResponseSenderBlock)sucessCallback
:(RCTResponseSenderBlock)failCallback)
{
NSLog(@"调起打开相册方法");
}
/**
保存相册
@return 返回BOOL
*/
RCT_EXPORT_METHOD(saveAlbum:(NSDictionary *)arguments
:(RCTResponseSenderBlock)sucessCallback
:(RCTResponseSenderBlock)failCallback)
{
NSLog(@"调起保存相册方法");
}
/**
图片剪切
@param shearImage 剪切图片
@return 剪切后的图片地址
*/
RCT_EXPORT_METHOD(shearImage:(NSDictionary *)arguments
:(RCTResponseSenderBlock)sucessCallback
:(RCTResponseSenderBlock)failCallback)
{
NSLog(@"调起图片剪切方法");
}
/**
图片压缩接口
@return 压缩后的图片路径
*/
RCT_EXPORT_METHOD(compressImage:(NSDictionary *)arguments
:(RCTResponseSenderBlock)sucessCallback
:(RCTResponseSenderBlock)failCallback)
{
NSLog(@"调起图片压缩方法");
}
@end
5. 实现打开相册
打开相册需要实现HXAlbumListViewControllerDelegate代理方法，跳转到系统相册中选取需要的图片，并返回。
核心源码如下：
dispatch_async(dispatch_get_main_queue(), ^{
[self.manager clearSelectedList];
// 照片选择控制器
HXAlbumListViewController *vc = [[HXAlbumListViewController alloc] init];
vc.delegate = self;
self.manager.configuration.openCamera = NO;
vc.manager = self.manager;
vc.manager.configuration.requestImageAfterFinishingSelection = YES;
[RCTPresentedViewController() presentViewController:[[HXCustomNavigationController alloc] initWithRootViewController:vc] animated:YES completion:nil];
});
6. 实现保存图片到相册
保存图片到相册,需要将用户传给系统的图片路径转换成UIImage格式，然后调用HXPhotoTools中的savePhotoToCustomAlbumWithName方法来实现图片保存到相册。
savePhotoToCustomAlbumWithName核心源码如下：
// 判断授权状态
[PHPhotoLibrary requestAuthorization:^(PHAuthorizationStatus status) {
if (status != PHAuthorizationStatusAuthorized) return;
dispatch_async(dispatch_get_main_queue(), ^{
if (!iOS9_Later) {
UIImageWriteToSavedPhotosAlbum(photo, nil, nil, nil);
return;
}
NSError *error = nil;
// 保存相片到相机胶卷
__block PHObjectPlaceholder *createdAsset = nil;
[[PHPhotoLibrary sharedPhotoLibrary] performChangesAndWait:^{
createdAsset = [PHAssetCreationRequest creationRequestForAssetFromImage:photo].placeholderForCreatedAsset;
} error:&error];
if (error) {
NSSLog(@"保存失败");
return;
}
// 拿到自定义的相册对象
PHAssetCollection *collection = [self createCollection:albumName];
if (collection == nil) {
NSSLog(@"保存自定义相册失败");
return;
}
[[PHPhotoLibrary sharedPhotoLibrary] performChangesAndWait:^{
[[PHAssetCollectionChangeRequest changeRequestForAssetCollection:collection] insertAssets:@[createdAsset] atIndexes:[NSIndexSet indexSetWithIndex:0]];
} error:&error];
if (error) {
NSSLog(@"保存自定义相册失败");
} else {
NSSLog(@"保存成功");
}
});
}];
7. 实现图片剪切
实现图片剪切，首先需要实现UIImagePickerControllerDelegate代理方法，然后将用户传入的图片路径转换成UIImage，根据传入的参数进行标准剪切。
核心源码如下：
dispatch_async(dispatch_get_main_queue(), ^{
HXDatePhotoEditViewController *vc = [[HXDatePhotoEditViewController alloc] init];
NSString *imagePath;
imagePath = [self handleFilePath:simplifyPath];
UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
if (image == nil) {
NSLog(@"需要剪切的图片不存在");
self.shearImageFailure(@[@{@"resultCode":@"-1",@"reslutMessage":@"需要剪切的图片不存在"}]);
}else{
HXPhotoModel *photoModel = [HXPhotoModel photoModelWithImage:image];
vc.model = photoModel;
vc.delegate = self;
vc.manager = self.manager;
vc.outside = YES;
[RCTPresentedViewController() presentViewController:[[HXCustomNavigationController alloc] initWithRootViewController:vc] animated:YES completion:nil];
}
});
8. 实现图片压缩
图片压缩分为按照比例进行压缩和按照byte压缩。
按照比例进行压缩核心源码如下：
//按照比例进行压缩
if ([[arguments allKeys] containsObject:@"scale"]) {
scale = [NSString stringWithFormat:@"%@",arguments[@"scale"]];
if (!ValidStr(scale)) {
NSLog(@"参数错误");
failCallback(@[@{@"resultCode":@"0",@"reslutMessage":@"参数错误"}]);
}
float scaleF = [scale floatValue];
UIImage *originalImg = [UIImage imageWithContentsOfFile:originaImgPath];
UIImage *compressedImg = [UIImageTool configureImage:originalImg withScale:scaleF];
NSData *data = UIImagePNGRepresentation(compressedImg);
BOOL success = [data writeToFile:compressedImgPath atomically:YES];
if (success) {
NSLog(@"图片压缩成功");
sucessCallback(@[@{@"status":@"1",@"data":compressedImgPath}]);
}else{
NSLog(@"图片压缩失败");
failCallback(@[@{@"resultCode":@"-1",@"reslutMessage":@"失败"}]);
}
}
按照byte压缩核心源码如下：
//按照byte压缩
if ([[arguments allKeys] containsObject:@"size"]) {
size = [NSString stringWithFormat:@"%@",arguments[@"size"]];;
if (!ValidStr(size)) {
failCallback(@[@{@"resultCode":@"0",@"reslutMessage":@"参数错误"}]);
}
NSInteger Byte = [size integerValue];
UIImage *originalImg = [UIImage imageWithContentsOfFile:originaImgPath];
UIImage *compressedImg = [[self class] configureImageWithoutDistort:originalImg withBytes:Byte];
NSData *data = UIImagePNGRepresentation(compressedImg);
BOOL success = [data writeToFile:compressedImgPath atomically:YES];
if (success) {
NSLog(@"图片压缩成功");
sucessCallback(@[@{@"status":@"1",@"data":compressedImgPath}]);
}else{
NSLog(@"图片压缩失败");
failCallback(@[@{@"resultCode":@"-1",@"reslutMessage":@"失败"}]);
}
}
9. Javascript调用浏览器方法
现在从 Javascript 里可以这样调用这个方法：
import { NativeModules } from "react-native";
const PhotosManagePlugin = NativeModules.PhotosManage;
//实现打开相册
PhotosManagePlugin.picture({},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
//实现保存图片到相册
PhotosManagePlugin.saveAlbum({image:"defaults://images/798E49BF-F71E-4CA9-BA96-026D23A7B491.jpg"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
//实现图片剪切
PhotosManagePlugin.shearImage({image:"defaults://2.png"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
//实现图片压缩
PhotosManagePlugin.compressImage({image:"defaults://images/798E49BF-F71E-4CA9-BA96-026D23A7B491.jpg",scale:"0.5"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
