react native ios原生module

2020-03-15  本文已影响0人  MasterPaul

使用步骤

以GeoMapModule为例
1、创建GeoMapModule类
2、GeoMapModule.h中引入 #import <React/RCTBridgeModule.h>,遵守RCTBridgeModule协议

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

NS_ASSUME_NONNULL_BEGIN

@interface GeoMapModule : NSObject<RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

3、导出名字,这个名字要和js端一直

RCT_EXPORT_MODULE(GeoModule);

4、写方法


RCT_EXPORT_METHOD(getGeoAppList:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{

  NSMutableArray *maps = [NSMutableArray array];
  //需要在主线程中操作
  dispatch_async(dispatch_get_main_queue(), ^{
       //苹果地图
       if ([[UIApplication sharedApplication]canOpenURL:[NSURL URLWithString:@"http://maps.apple.com/"]]) {
         NSMutableDictionary *iosMapDic = [NSMutableDictionary dictionary];
         iosMapDic[@"title"] = @"苹果地图";
         iosMapDic[@"tag"] = @"apple";
         [maps addObject:iosMapDic];
       }
       //百度地图
       if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"baidumap://"]]) {
         NSMutableDictionary *baiduMapDic = [NSMutableDictionary dictionary];
         baiduMapDic[@"title"] = @"百度地图";
         baiduMapDic[@"tag"] = @"baidu";
     //    NSString *urlString = [[NSString stringWithFormat:@"baidumap://map/direction?origin={{我的位置}}&destination=name=%@&mode=driving&coord_type=gcj02",address] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
     //    baiduMapDic[@"url"] = urlString;
         [maps addObject:baiduMapDic];
       }
       //高德地图
       if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"iosamap://"]]) {
         NSMutableDictionary *gaodeMapDic = [NSMutableDictionary dictionary];
         gaodeMapDic[@"title"] = @"高德地图";
         gaodeMapDic[@"tag"] = @"amap";
     //    NSString *urlString = [[NSString stringWithFormat:@"iosamap://navi?sourceApplication=%@&backScheme=%@&lat=%f&lon=%f&dev=0&style=2",@"导航功能",@"nav123456",[lat doubleValue],[lon doubleValue]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
     //    gaodeMapDic[@"url"] = urlString;
         [maps addObject:gaodeMapDic];
       }
       //腾讯地图
       if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"qqmap://"]]) {
         NSMutableDictionary *qqMapDic = [NSMutableDictionary dictionary];
         qqMapDic[@"title"] = @"腾讯地图";
         qqMapDic[@"tag"] = @"qqmap";
     //    NSString *urlString = [[NSString stringWithFormat:@"qqmap://map/routeplan?from=我的位置&type=drive&tocoord=%f,%f&to=%@&coord_type=1&policy=0",[lat doubleValue],[lon doubleValue],address] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
     //    qqMapDic[@"url"] = urlString;
         [maps addObject:qqMapDic];
       }
       
       resolve(maps);
  });

  
//  RCTLogInfo(@"地图app===经度:",maps);
  
  
}

5、如果有UI操作需要加上

+ (BOOL)requiresMainQueueSetup{
  return YES;
}

6、js 端,创建js文件封装一下

import {NativeModules} from 'react-native';
const { GeoModule} = NativeModules;
  //获取手机上的导航软件APP列表
class GeoUtil {
    static getGeoAppList(){
         return  GeoModule.getGeoAppList()
    }
}
//调用
GeoUtil.getGeoAppList().then(res=>{
  console.log(res)
},error=>{

})

原生向RN中发送消息 :

1、创建EventModule类,方法和上面一直

RCT_EXPORT_MODULE(EventModule)

//初始化的时候添加通知中心监听
- (instancetype)init {
    if (self = [super init]) {
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(customEventReceived:) name:EVENT_REMINDER object:nil];
    }
    return self;
}
//别忘了移除
- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self name:EVENT_REMINDER object:nil];
}
//添加支持js监听的事件
-(NSArray<NSString*> *)supportedEvents
{
  return @[@"CustomMessage"];
}

#pragma mark --监听
- (void)onTimRefreshNotification:(NSNotification *)no{
  [self sendEventWithName:@"IMEventListener" body:@{@"event":@"onRefreshConversation"}];
}

- (void)customEventReceived:(NSNotification *)notification {
    NSString *eventName = notification.object[@"name"];
    NSString *body = notification.object[@"body"];
  //延迟发送
  double delayInSeconds = 1.0;
  dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC);
  dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
      [self sendEventWithName:@"CustomMessage" body:@{
        @"event":eventName,
        @"body": body
      }];
    
  });
    
}

2、js端监听,封装一下,创建EventUtil.js文件

import {NativeEventEmitter} from 'react-native'
var eventEmitter = new NativeEventEmitter(EventModule)
class EventUtil{
    static addCustomEventListener = (listener) =>{
        return eventEmitter.addListener('CustomMessage',listener)
    }
}

//使用
 componentDidMount() {
    
        this.listener = EventUtil.addCustomEventListener((data)=>{
            console.log('Message IMEventListener事件',data)
            if(data.event === 'onRefreshConversation' ||
                data.event === 'onNewMessageNotification'
            ){

                this.getData()
                this.getUnreadCount()
            }
        })
    }
//别忘记移除监听
 componentWillUnmount(){

        this.listener && this.listener.remove()
    }

3、原生需要向RN中发送消息的时候直接通过发通知就可以了

//userInfo是一个字典
[[NSNotificationCenter defaultCenter] postNotificationName:EVENT_REMINDER object:@{
      @"name":@"backMessage",
      @"body":userInfo
    }];
上一篇下一篇

猜你喜欢

热点阅读