在此之前,最好了解一下RN與OC直接的通信機制!
1.引入頭文件
#import <RCTBridgeModule.h>
#import <RCTConvert.h>
#import <RCTEventDispatcher.h>
2.遵守協議<RCTBridgeModule>
3.向系統注冊模塊RCT_EXPORT_MODULE()宏(這個宏也可以添加一個參數用來指定在Javascript中訪問這個模塊的名字。如果你不指定，默認就會使用這個Objective-C類的名字。)
4.暴露模塊方法RCT_EXPORT_METHOD(doSomething)
完整的代碼如下:
.h文件
#import <Foundation/Foundation.h>
#import <RCTBridgeModule.h>
@interface RegistManager : UIViewController<RCTBridgeModule>
@end
.m文件
#import "RegistManager.h"
#import <RCTConvert.h>
#import <RCTEventDispatcher.h>
@interface RegistManager ()<UIImagePickerControllerDelegate, UINavigationControllerDelegate,RCTBridgeModule>
@end
@implementation RegistManager
RCT_EXPORT_MODULE();
//橋接到Javascript的方法返回值類型必須是void。React Native的橋接操作是異步的，所以要返回結果給Javascript，必須通過回調或者觸發事件來進行
RCT_EXPORT_METHOD(openImagePicker)
{
[self showPhotoChooseSheetWithTitle:@"" message:@"選擇頭像"];
}
- (void)showPhotoChooseSheetWithTitle:( NSString *)title message:( NSString *)message {
//打開拍照
void(^cameraBlock)() = ^(){
UIImagePickerController *upc = [[UIImagePickerController alloc] init];
upc.videoQuality = UIImagePickerControllerQualityTypeMedium;
upc.delegate = self;
upc.allowsEditing = NO;
//拍照
upc.sourceType = UIImagePickerControllerSourceTypeCamera;
[self presentViewController:upc animated:YES completion:nil];
};
//系統相冊
void(^photoBlock)() = ^(){
UIImagePickerController *upc = [[UIImagePickerController alloc] init];
upc.videoQuality = UIImagePickerControllerQualityTypeMedium;
upc.delegate = self;
upc.allowsEditing = NO;
//系統相冊
upc.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
[self presentViewController:upc animated:YES completion:nil];
};
NSArray *array = @[
@{@"拍攝":cameraBlock},
@{@"系統相冊":photoBlock}
];
[self showAlertWithTitle:title message:message array:array cancleBlock:nil];
}
-(void)showAlertWithTitle:( NSString *)title message:( NSString *)message array:(NSArray <NSDictionary *>*)array cancleBlock:(void(^)())cancleBlock {
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:title message:message preferredStyle:UIAlertControllerStyleAlert];
for (NSDictionary *dict in array) {
NSString *actionTitle = [[dict allKeys] lastObject];
void(^sureBlock)() = [[[dict allValues] lastObject] isKindOfClass:[NSNumber class]] ? nil:[[dict allValues] lastObject];
[alertVC addAction:[UIAlertAction actionWithTitle:actionTitle style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
if (sureBlock) {
sureBlock();
}
}]];
}
[alertVC addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
if (cancleBlock) {
cancleBlock();
}
}]];
[self presentViewController:alertVC animated:YES completion:nil];
}
#pragma mark - UIImagePickerControllerDelegate
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
[picker dismissViewControllerAnimated:NO completion:^{
}];
}
.js文件中
模塊類完成映射后,會在JS中生成一個模塊對象RegistManager以供調用
var RegistManager = require('react-native').NativeModules.RegistManager;
var PersonInfo = React.createClass({
getInitialState(){
return {
avatarSource:null,
city:'',
trade:'',
major:'',
cityPick:false,
tradePick:false,
majorPick:false,
}
},
componentWillMount(){
console.log(this.props.userData)
},
render(){
return(
<View style={styles.getCodeBody}>
<NavBar backAction={()=>{
this.props.navigator.pop()
}}
title={'完善個人信息'}
leftImage={require('../images/Common/icon/button_return_white.png')}
rightItemTitle="跳過"
nextAction={()=>{
RegistManager.back();
}}/>
<ScrollView style={{flex:1}}>
{/*頭像*/}
<View style={styles.pIconView}>
<TouchableWithoutFeedback onPress={()=>{
// js->oc
RegistManager.openImagePicker()
}}>
<Image
source={this.state.avatarSource?this.state.avatarSource:require('../images/Login/button_register_camera.png')}
style={styles.pIconImage}></Image>
</TouchableWithoutFeedback>
</View>
...
</ScrollView>
</View>
)
}
})
這樣基本就完成了調用原生相冊
但是一般都需要把選中的圖片在傳遞給js去顯示
熟悉兩個block
5.void (^RCTPromiseResolveBlock)(id result)
6.void (^RCTPromiseRejectBlock)(NSString *code, NSString *message, NSError *error)
注意:這兩個block要同時存在,不然會報錯
111.png
7.把block保存下來,取到圖片后調用回調修改后:
.m文件
@interface RegistManager : UIViewController<RCTBridgeModule>
@property(nonatomic, strong) RCTPromiseResolveBlock resolve;
@end
@implementation RegistManager
RCT_EXPORT_METHOD(openImagePicker:(NSString *)userID
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
self.resolve = resolve;
[self showPhotoChooseSheetWithTitle:@"" message:@"選擇頭像"];
}
#pragma mark - UIImagePickerControllerDelegate
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
UIImage * image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
CGSize size = {100, 100};
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
[[UIBezierPath bezierPathWithRoundedRect:(CGRect){CGPointZero, size} cornerRadius:0] addClip];
[image drawInRect:(CGRect){CGPointZero, size}];
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *data = UIImageJPEGRepresentation(result, 1.0f);
[data writeToFile:保存到本地地址 atomically:YES];
[picker dismissViewControllerAnimated:NO completion:^{
// 傳給JS
self.resolve(保存到本地地址);
}];
}
@end
.js文件
RegistManager.openImagePicker(userData._id).then((data)=>{
this.setState({
avatarSource:{uri: data}
})
}).catch((err)=>{
console.log(err)
})
