在此之前,最好了解一下RN與OC直接的通信機(jī)制!

1.引入頭文件
#import <RCTBridgeModule.h>
#import <RCTConvert.h>
#import <RCTEventDispatcher.h>
2.遵守協(xié)議<RCTBridgeModule>
3.向系統(tǒng)注冊(cè)模塊RCT_EXPORT_MODULE()宏(這個(gè)宏也可以添加一個(gè)參數(shù)用來(lái)指定在Javascript中訪問(wèn)這個(gè)模塊的名字。如果你不指定，默認(rèn)就會(huì)使用這個(gè)Objective-C類(lèi)的名字。)
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的方法返回值類(lèi)型必須是void。React Native的橋接操作是異步的，所以要返回結(jié)果給Javascript，必須通過(guò)回調(diào)或者觸發(fā)事件來(lái)進(jìn)行
RCT_EXPORT_METHOD(openImagePicker)
{
      [self showPhotoChooseSheetWithTitle:@"" message:@"選擇頭像"];
}
- (void)showPhotoChooseSheetWithTitle:( NSString *)title message:( NSString *)message {
    
    //打開(kāi)拍照
    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];
    };
    //系統(tǒng)相冊(cè)
    void(^photoBlock)() = ^(){
            UIImagePickerController *upc = [[UIImagePickerController alloc] init];
            upc.videoQuality = UIImagePickerControllerQualityTypeMedium;
            upc.delegate = self;
            upc.allowsEditing = NO;
            
            //系統(tǒng)相冊(cè)
            upc.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
            [self  presentViewController:upc animated:YES completion:nil];
    };
        
        NSArray *array = @[
                           @{@"拍攝":cameraBlock},
                           @{@"系統(tǒng)相冊(cè)":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文件中

模塊類(lèi)完成映射后,會(huì)在JS中生成一個(gè)模塊對(duì)象RegistManager以供調(diào)用

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={'完善個(gè)人信息'}
                        leftImage={require('../images/Common/icon/button_return_white.png')}
                        rightItemTitle="跳過(guò)"
                        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>
        )
    }
})

這樣基本就完成了調(diào)用原生相冊(cè)
但是一般都需要把選中的圖片在傳遞給js去顯示
熟悉兩個(gè)block
5.void (^RCTPromiseResolveBlock)(id result)
6.void (^RCTPromiseRejectBlock)(NSString *code, NSString *message, NSError *error)
注意:這兩個(gè)block要同時(shí)存在,不然會(huì)報(bào)錯(cuò)

111.png

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