React Native 二维码扫描ios(原生交互)

来源:互联网 发布:c高级编程第11版 pdf 编辑:程序博客网 时间:2024/06/05 03:52

二维码扫描并且与iOS原生交互,github上导入iOS二维码的库https://github.com/kingsic/SGQRCode

1、新建一个以RCT开头的.h文件

#import <UIKit/UIKit.h>#import <React/RCTBridgeModule.h>@interface RCTYunXiQRCode : UIViewController<RCTBridgeModule>@end

.m文件

#import "RCTYunXiQRCode.h"#import "AppDelegate.h"#import "SGQRCodeScanningVC.h"#import <AVFoundation/AVFoundation.h>@interface RCTYunXiQRCode ()@end@implementation RCTYunXiQRCodeRCT_EXPORT_MODULE()RCT_REMAP_METHOD(startQRCode,                 title:(NSString *)title                 resolver:(RCTPromiseResolveBlock)resolve                 rejecter:(RCTPromiseRejectBlock)reject){  AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];  if (device) {    AVAuthorizationStatus status = [AVCaptureDevice authorizationStatusForMediaType:AVMediaTypeVideo];    if (status == AVAuthorizationStatusNotDetermined) {      [AVCaptureDevice requestAccessForMediaType:AVMediaTypeVideo completionHandler:^(BOOL granted) {        if (granted) {          dispatch_async(dispatch_get_main_queue(), ^{            SGQRCodeScanningVC * vc = [[SGQRCodeScanningVC alloc] init];            vc.resolveBlock = resolve;            vc.rejectBlock = reject;            vc.title = title ? title : @"扫一扫";            UINavigationController * nvc = [[UINavigationController alloc] initWithRootViewController:vc];            UIViewController * rootViewController = [[[UIApplication sharedApplication] keyWindow] rootViewController];            [rootViewController presentViewController:nvc animated:YES completion:nil];          });          NSLog(@"当前线程 - - %@", [NSThread currentThread]);          // 用户第一次同意了访问相机权限          NSLog(@"用户第一次同意了访问相机权限");        } else {          // 用户第一次拒绝了访问相机权限          NSLog(@"用户第一次拒绝了访问相机权限");        }      }];    } else if (status == AVAuthorizationStatusAuthorized) { // 用户允许当前应用访问相机      SGQRCodeScanningVC * vc = [[SGQRCodeScanningVC alloc] init];      vc.resolveBlock = resolve;      vc.rejectBlock = reject;      vc.title = title ? title : @"扫一扫";      UINavigationController * nvc = [[UINavigationController alloc] initWithRootViewController:vc];      UIViewController * rootViewController = [[[UIApplication sharedApplication] keyWindow] rootViewController];      [rootViewController presentViewController:nvc animated:YES completion:nil];    } else if (status == AVAuthorizationStatusDenied) { // 用户拒绝当前应用访问相机      UIAlertController *alertC = [UIAlertController alertControllerWithTitle:@"⚠️ 警告" message:@"请去-> [设置 - 隐私 - 相机 - SGQRCodeExample] 打开访问开关" preferredStyle:(UIAlertControllerStyleAlert)];      UIAlertAction *alertA = [UIAlertAction actionWithTitle:@"确定" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {      }];      [alertC addAction:alertA];      UIViewController * rootViewController = [[[UIApplication sharedApplication] keyWindow] rootViewController];      [rootViewController presentViewController:alertC animated:YES completion:nil];    } else if (status == AVAuthorizationStatusRestricted) {      NSLog(@"因为系统原因, 无法访问相册");    }  } else {    UIAlertController *alertC = [UIAlertController alertControllerWithTitle:@"温馨提示" message:@"未检测到您的摄像头" preferredStyle:(UIAlertControllerStyleAlert)];    UIAlertAction *alertA = [UIAlertAction actionWithTitle:@"确定" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {    }];    [alertC addAction:alertA];    UIViewController * rootViewController = [[[UIApplication sharedApplication] keyWindow] rootViewController];    [rootViewController presentViewController:alertC animated:YES completion:nil];  }}@end

2、在SGQRCodeScanningVC.h文件中声明RCTPromiseResolveBlockRCTPromiseRejectBlock属性,RCTPromiseResolveBlockPromises成功时执行的代码段,RCTPromiseRejectBlockPromises失败时执行的代码段。

#import <UIKit/UIKit.h>#import <React/RCTBridgeModule.h>@interface SGQRCodeScanningVC : UIViewController@property(nonatomic, copy)RCTPromiseResolveBlock resolveBlock;@property(nonatomic, copy)RCTPromiseRejectBlock rejectBlock;@end

3、在React Native中新建一个QRCode文件夹,在文件夹下创建index.js文件

import { NativeModules } from 'react-native';const QRCode=NativeModules.YunXiQRCode; // 原生模块下的RCTYunXiQRCode文件async function scanQRCode(title){    let result=null    try{        result =await QRCode.startQRCode(title);    }catch (err){        return Promise.reject(err);    }    return result;}export {scanQRCode}

4、使用

QRCode.scanQRCode('扫码溯源').then((data) => {     Console.Log('data',data)}).catch(err => {Console.Log('err', err)})
原创粉丝点击