react-native相互通信

作者: 黄成 | 来源:发表于2016-06-16 15:37 被阅读535次

    react-native的双向通信

    demo项目下载

    react->native

    实现提供给react的模块,模块需要实现RCTBridgeModule协议,然后暴露给react的类名和希望react调起的方法
    
    例如:
    
    iOS project:
    
    RNNativeBridgeModule.h
    
    #import <Foundation/Foundation.h>
    #import "RCTBridgeModule.h"
    
    @interface RNNativeBridgeModule : NSObject  <RCTBridgeModule>
    
    - (void)sendMsg;
    
    @end
    
    

    RNNativeBridgeModule.m

    #import "RNNativeBridgeModule.h"
    
    
    @implementation RNNativeBridgeModule
    
    RCT_EXPORT_MODULE()
    
    RCT_EXPORT_METHOD(AddEvent:(NSDictionary *)dictionary)
    {
        NSLog(@"接收到RN传过来的数据为:%@",dictionary);
        // Date is ready to use!
    }
    
    
    

    React端:

    导入:

    var { NativeModules } = require('react-native');
    var RNNativeBridgeModule = NativeModules.RNNativeBridgeModule;
    

    调用:

    RNNativeBridgeModule.AddEvent({'name':'huangcheng'});
    

    iOS->react

    在iOS初始化的时候,需要实例一个RCTRootView

    基本我们初始化都是:

    RCTRootView *view = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"demo" initialProperties:nil launchOptions:nil];

    这里面需要仔细阅读源码(我还没怎么看)
    这种方式会给view生成一个RCTBridge,同时会把这个bridge传给所有实现协议的模块,引用的只需要

    @synthesize bridge = _bridge;
    

    这里给react发送消息,需要通过bridge的eventDispatcher,简单做法就是:

    [self.rtView.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@{@"name":@"huangcheng"}];
    

    这时候需要在react端监听:

    导入:

    import { NativeAppEventEmitter } from 'react-native';
    

    添加监听:

    NativeAppEventEmitter.addListener(
             'EventReminder',
              (reminder) => {
                let errorCode=reminder.errorCode;
                //msg:reminder.name获取获取的消息
                }
              }
             );
    

    react->native并且回调结果给react

    在之前的原生模块中加入如下模式的方法

    RCT_EXPORT_METHOD(RNInvokeOCCallBack:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback){
        NSLog(@"接收到RN传过来的数据为:%@",dictionary);
        NSArray *events = [[NSArray alloc] initWithObjects:@"黄成",@"huangcheng", nil];
        callback(@[[NSNull null], events]);
    }
    

    react端调用:

    RNNativeBridgeModule.RNInvokeOCCallBack({'name':'huangcheng'}, (error,events)=>{
                    //events:events获取到的数据
              })
    

    相关文章

      网友评论

        本文标题:react-native相互通信

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