RN开发笔记-不同模块间的通信

一、背景介绍

iOS项目基础上进行的混合开发，首页列表View和侧边栏View使用了RN的页面，其它页面还是使用原生的。我分别注册了这两个模块，现在希望点击RN侧边栏View的时候，RN首页列表View可以做出响应，比如开始刷新列表。
但我使用通知或者Block回调的时候，发现并不能实现需求，最后还是通过修改原生页面中的RCTRootView的appProperties 属性来通知RN的页面来做出响应！这里做一下记录，希望对大家有所帮助。

二、解决思路

1. 注册不同的模块

1. RN，index.js 

// 首页
AppRegistry.registerComponent('home', () => HJYHomePage);
// 首页侧边栏全屏组件
AppRegistry.registerComponent('sidebarView', () => HJYHomeSidebarView);

2. 点击侧边栏模块中的一个按钮，首页模块做出响应

1. RN，HJYHomeSidebarView.js
/// 按钮事件
<TouchableOpacity
    onPress={() => handleClickItem.bind(this)(rowItem, rowIndex)}>
</TouchableOpacity>

function handleClickItem(itemData) {
// 向原生的首页发送消息
RNHomeModule.clickSidebarViewSelectProvinceItemEvent(itemData);
}

2. 原生，RNHomeModule
/// 代理方法
@property (nonatomic, weak) id <RNHomeEventProtocol>delegate;

/// 侧边栏-点击省份切换
RCT_EXPORT_METHOD(clickSidebarViewSelectProvinceItemEvent:(NSDictionary *)data) {
    if (self.delegate && [self.delegate respondsToSelector:@selector(nativeClickSelecteProvinceItem:)]) {
        [self.delegate nativeClickSelecteProvinceItem:data];
    }  
}

//  定义代理方法
RNHomeEventProtocol.h
/// 省份列表-点击
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)data;


3. 原生，RNHomeViewController.m
/// 遵守协议
@interface RNHomeViewController ()<RNHomeEventProtocol>

/// 代理方法，省份列表-点击
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
    dispatch_async(dispatch_get_main_queue(), ^{
        // appProperties 就是js页面中的 props，当它改变时，js页面会监听到此变化
        // time 时间戳是为了保证多次调用 appProperties 的值是不同的
       self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate getCurrentDate:@"yyyy-MM-dd HH-mm-ss-SSS"]};
    });
}

/// 创建RN视图
- (void)initRnRootView:(NSDictionary *)propsDic {
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
    RCTRootView *rootView 
    ...
    self.rnRootView = rootView;
    [self.view addSubview: rootView];
}

4. RN，HJYHomePage.js

  /**
   * @description: 当props发生变化时执行，初始化render时不执行，
   * 在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，
   * 旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用
   * @param {*} nextProps 新的props
   * @return {*}
   */  
  UNSAFE_componentWillReceiveProps(nextProps) {
    console.log('rn首页将收到新的props： ', this.props, nextProps);
    if (nextProps.refresh) {
      this.onRefresh(); // rn页面中定义的实现下拉刷新的方法
    }
  }

3. 总结问题

本来，在第3步的时候，打算使用原生向RN发送通知的方式来通知 HJYHomePage.js 做出响应的,可是收不到通知，应该是因为注册了不同的模块

3. 原生，RNHomeViewController.m
/// 代理方法，省份列表-点击
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.rnHomeModule moduleSendNotificationToReFreshList];
        // self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate date]};
    });
}

4. 原生，RNHomeModule.m
/// 发送通知-刷新表格
- (void)moduleSendNotificationToReFreshList {
    if (hasListeners) {
        [self sendEventWithName:@"HJYRefreshHomeListNotification" body:@{}];
    }
}

5. RN，HJYHomePage.js

homeModule.addListener('HJYRefreshHomeListNotification', () => {
      console.log('刷新表格');
      this.onRefresh();
    });
可是并不会走到这一步~~~

后来，我又尝试了使用Block的方式,发现第一次点击的时候是可以的，第二次点击的时候就报错啦，查了下资料，好像是内存的原因，block被释放了？

3. 原生，RNHomeViewController.m
/// 代理方法，省份列表-点击
- (void)nativeClickSelecteProvinceItem:(NSDictionary *)dict {
  dispatch_async(dispatch_get_main_queue(), ^{

  if (self.rnHomeModule.xxclickSidebarViewSelectProvinceItemCallback) {
      self.rnHomeModule.xxclickSidebarViewSelectProvinceItemCallback();
  }
      // self.rnRootView.appProperties = @{@"refresh": @(YES), @"entrance": @(1), @"time": [NSDate date]};
  });
}

4. 原生，RNHomeModule

@property (nonatomic, copy) RCTResponseSenderBlock xxclickSidebarViewSelectProvinceItemCallback;

/// 省份列表-点击item
/// @param callback 回调
RCT_EXPORT_METHOD(xxclickSidebarViewSelectProvinceItem:(RCTResponseSenderBlock)callback) {
  self.xxclickSidebarViewSelectProvinceItemCallback = callback;
}

5. RN，HJYHomePage.js

componentDidMount() {
  RNHomeModule.xxclickSidebarViewSelectProvinceItem(() => {
  });
}