React native 项目中JS与OC 如何进行数据交互

前言：自己从原生转到RN已经有两个月，一直跟着组长学习RN，在项目中实战的一些体会记录一下，本文中着重讲述JS与OC是如何进行数据交互，希望能够得到各位读者的建议。

为何需要入手RN是因为RN可以提高开发速度。

首先flexbox机制布局以及属性设置上，可以一段代码表述清楚，就可以集中精力在逻辑代码和体验上。但是RN也有缺点，就是版本兼容性问题一直是让开发者头疼的问题，不过建议各位开发从稳定的版本入手，如果由于历史原因需要兼容老项目的RN版本，还是老老实实用从老版本进行维护和开发。

其次最让公司所欣慰的一点就是热更新，就是不用打包提交APPStore 让用户重新启动APP就可以体验到最新的功能，国庆期间很火的P国旗功能。值得注意的是在APP审核期间不要进行热更新，规避被拒的风险。

在很多金融APP中 有个很重要却很稳定的模块就是行情K线模块，这个模块是展示了某个金融产品的交易数据。这里的业务操作必须和JS进行数据交互。

 

一、原生模块需要做的准备工作

原生和JS交互是通过一个桥接文件，这个文件继承RCTEventEmitter类翻译成中文叫“事件发射器”，查看RCTEventEmitter头文件看到这样一段注释“events to be obserbved by JS” 翻译成中文是事件将被JS观察。还得继承RCTBridgeModule代理，此代理功能强大很多关键的方法就是从这里体现的。例如RTC_EXPORT_MODULE()方法，意思是JS暴露给OC的模块，OC只需要按照JS所规范的方法就可以将数据传递给JS代码进行执行。

要设置JS所支持的模块调用方法- (NSArray<NSString *> *)supportedEvents 设置一个数组。

原生只需要通过一个block进行调用方法- (void)sendEventWithName:(NSString *)eventName body:(id)body。这个方法在RN源码中对应的是如下方法：

- (void)enqueueJSCall:(NSString *)module method:(NSString *)method args:(NSArray *)args completion:(dispatch_block_t)completion

{

  [self.batchedBridge enqueueJSCall:module method:method args:args completion:completion];

}

二、JS所需要做的准备工作

在对应的OC2JS文件中引入

import { NativeEventEmitter, NativeModules } from 'react-native';

const { RNBridgeEventManager } = NativeModules;

const loadingManagerEmitter = new NativeEventEmitter(RNBridgeEventManager);

const subscription = loadingManagerEmitter.addListener(‘暴露给OC的模块名称’,(reminder) => {

//执行的方法

});

定义一个RN的桥接对象RNBridgeEventManager ，新建一个订阅者对象subscription ，订阅者对象实现监听暴露给OC的模块发送过来的参数。然后执行JS方法。