React Native开发指南

React-Native 原生模块调用(iOS)

2017-01-10  本文已影响151人  冷洪林

成都React-Native交流群,进群给管理,先到先得哦

在项目中遇到地图,拨打电话,清除缓存等iOS与Andiorid机制不同的功能,就需要调用原生的界面或模块,这里说下React Native调用iOS原生模块,Andiorid也是大同小异

1.创建原生模块,实现“RCTBridgeModule”协议

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface KSDMapManager : NSObject <RCTBridgeModule>

@end

2 导出模块,导出方法

@implementation KSDMapManager
//导出模块
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(gotoIM:(RCTResponseSenderBlock)callback)
{
   __weak typeof(self) weakSelf = self;
  self.callback = callback;

  UIViewController *controller = (UIViewController*)[[[UIApplication sharedApplication] keyWindow] rootViewController];
  KSDMapLocationViewController *mapVc = [[KSDMapLocationViewController alloc] init];
  mapVc.handle = ^(NSString *address) {
    weakSelf.itemValue = address;
    NSArray *events = [[NSArray alloc] initWithObjects:self.itemValue, nil];
    callback(events);
  }; 
  [controller presentViewController:mapVc animated:YES completion:nil];
}

3 js文件中调用

//创建原生模块实例
var KSDMapManager = NativeModules.KSDMapManager;
//方法调用
KSDMapManager.gotoIM(
          (events)=>{
            this._inputReceiveAddress(events);
            console.log(events);
          })       

上一篇下一篇

猜你喜欢

热点阅读