RN学习（五）——RN与iOS交互

iOS主动向RN传值

在iOS里创建继承RCTEventEmitter的类

RCTEventEmitter需要写的方法

//导出模块,不添加参数即默认为该类的类名名
RCT_EXPORT_MODULE();
//必须写的，否则程序会崩溃。
- (NSArray<NSString *> *)supportedEvents {
  //ios暴露给RN的监听事件。
  return @[@"nativeToRN"];
}
//添加通知，在iOS想调RN的地方直接发此通知即可
- (void)startObserving {
  [[NSNotificationCenter defaultCenter]addObserver:self
                                          selector:@selector(iOSSendMsgToRN:)
                                              name:@"iOSSendMsgToRN"
                                            object:nil];
}
// 在此移除通知
-(void)stopObserving {
  [[NSNotificationCenter defaultCenter] removeObserver:self name:@"iOSSendMsgToRN" object:nil];
}
- (void)iOSSendMsgToRN:(NSNotification *)noti {
  NSLog(@"iOSSendMsgToRN:%@",noti.userInfo);
  __weak __typeof(self)weakSelf = self;
  dispatch_async(dispatch_get_main_queue(), ^{
    __strong typeof(weakSelf) strongSelf = weakSelf;
    [strongSelf sendEventWithName:@"nativeToRN" body:noti.userInfo];
  });
}
复制代码

iOS主动传值

在你想传值的地方发送这个通知。

  self.dic[@"name"] = @"fromIOS-更新值";
  [[NSNotificationCenter defaultCenter]postNotificationName:@"iOSSendMsgToRN" object:nil userInfo:self.dic];
复制代码

RN里面需要写的方法

在以下两个方法里面添加和移除对应的观察者。RCExport要与iOS注册的模块名称保持一致

componentDidMount() {
    //监听
    let eventEmitter = new NativeEventEmitter(NativeModules.RCExport);
    this.listener = eventEmitter.addListener("nativeToRN", (result) => {

      this.setState({
        //此处赋值
        IOSInfo:result
      })
    })
  }
  componentWillUnmount() {
    //移除监听
    this.listener && this.listener.remove();
  }
复制代码

RN通知iOS

创建一个继承NSObject的类，并遵循RCTBridgeModule协议

RTModule和RN里面保持一致,

//导出模块,不添加参数即默认为该类的类名名
RCT_EXPORT_MODULE(RTModule)
复制代码

我是根据方法名，参数。发通知。

//RN跳转原生界面，参数：eventName=方法名字，propertyDic=参数，callback可回调
RCT_EXPORT_METHOD(addEventName:(NSString *)eventName propertyDic:(NSDictionary *)propertyDic callback:(RCTResponseSenderBlock)callback) {
  NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithDictionary:@{@"eventName":eventName}];
  if (propertyDic) {
    [dic setObject:propertyDic forKey:@"propertyDic"];
  }
  NSLog(@"RN传入eventName=%@,propertyDic=%@",eventName,propertyDic);
  dispatch_async(dispatch_get_main_queue(), ^{
    [[NSNotificationCenter defaultCenter]postNotificationName:@"RNToIOS" object:dic];
  });
}
复制代码

RN通知iOS的代码

//通知iOS
  informIOS (eventName,propertyDic) {
    NativeModules.RTModule.addEventName(eventName,propertyDic,(error,event) => {

      alert(error)
    })
  }
复制代码

RN调用传参和不传参的方法

          <Button title={'跳iOS页面无参'} onPress={() => this.informIOS('RNToIOS',null)}/>
          <Button title={'跳iOS页面有参'} onPress={() => this.informIOS('RNToIOS',{'fromRN':'RN跳iOS传的参'})}/>
复制代码

iOS接收方法

添加通知

  [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(receiveFromRN:) name:@"RNToIOS" object:nil];
  - (void)receiveFromRN:(NSNotification *)noti {
  NSDictionary *dic = noti.object;
  NSString *selName = dic[@"eventName"];
  NSDictionary *propertyName = dic[@"propertyDic"];
  if (propertyName) {
    if ([self respondsToSelector:NSSelectorFromString([NSString stringWithFormat:@"%@:",selName])]) {
      [self performSelector:NSSelectorFromString([NSString stringWithFormat:@"%@:",selName]) withObject:propertyName];
    }else {
      NSLog(@"===找不到此方法%@:",selName);
    }
  }else {
    if ([self respondsToSelector:NSSelectorFromString(selName)]) {
      [self performSelector:NSSelectorFromString(selName) withObject:nil];
    }else {
      NSLog(@"===找不到此方法%@",selName);
    }
  }
}
复制代码

添加对应的RN的方法

- (void)RNToIOS:(NSDictionary *)param {
  RootVC *rootVC = [[RootVC alloc]init];
  rootVC.fromRN = param[@"fromRN"];
  [self.navigationController pushViewController:rootVC animated:YES];
}
- (void)RNToIOS {
  [self.navigationController pushViewController:[RootVC new] animated:YES];
}
复制代码

效果图

demo地址

github.com/zttina/RNAn…

请教大佬

1. RN通知iOS，大家是通过这种方式来的吗？目前查到的资料，RN传个方法名字和参数名字去通知iOS，iOS发送通知，根据方法名字和参数来做对应的操作和传对应的参数。
2. 下拉刷新，自己写了个view放在屏幕以上的位置，下拉出现动画，但是我不知道怎么让ScrollView停留（笨呐。。），请问各位谁有相关文章或者代码可以参考的。

总结

    目前对iOS和RN的交互也只是有了初步认识，RN给iOS传参回调还没写，之后研究出来，再继续更新这篇~~