美文网首页
react native ios原生module

react native ios原生module

作者: MasterPaul | 来源:发表于2020-03-15 01:00 被阅读0次

    使用步骤

    以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
        }];
    

    相关文章

      网友评论

          本文标题:react native ios原生module

          本文链接:https://www.haomeiwen.com/subject/iyuashtx.html