作者：朱靈子
React Native用IOS自帶的JavaScriptCore作為JS的解析引擎，普通的JS-OC通信就是React Native在OC定義一個子產品方法，JS可以直接調用這個子產品方法并還可以無縫銜接回調。
具體的接口調用實作方法如下所示：
将OC注冊進來的子產品取出，調用子產品中的對應函數，且将參數傳入 var RCTVideo = require('react-native').NativeModules.RCTVideo;
RCTVideo.addVideoTitle('video title');
利用回調參數得到通路OC的函數，并得到其傳回值
利用回調參數得到通路OC的函數，并得到其傳回值 callback函數：第一個參數是一個錯誤對象（沒有發生錯誤的時候為null），而剩下的部分是函數的傳回值。RCTVideo.RNCallbackEvent('dsb',(error,callBackEvents)=>{
if (error) {
console.error(error);
} else {
AlertIOS.alert('傳回值：'+JSON.stringify(callBackEvents));
}
});
如果想要OC通路JS，我們需要利用 NativeAppEventEmitter元件，利用其addListener進行注冊監聽
ocFun : 将綁定好的監聽事件引用交給此變量儲存。
addListener：
第一個參數：事件名
第二個參數：響應函數
注意：利用addListener進行監聽，一定要對應有取消監聽！
且通常取消監聽都在componentWillUnmount函數中進行。如下：
如何用js建構native封裝好的本地UI元件 簡單地封裝一個native封裝好的本地視訊組建的實作方法如下：var { requireNativeComponent } = require('react-native');
module.exports = requireNativeComponent('RCTVideo', null);現在這是 JavaScript 中一個功能完整的 native video視圖元件了，包括 pinch-zoom 和其他 native 手勢支援, 但是我們還不能用 JavaScript 來真正的控制它,是以接下來我們需要給組建添加屬性和方法，具體示例如下：class VideoView extends React.Component {
constructor() {
this.play = this.play.bind(this);
play = (event) => {
if (this.props.play) {
this.props.play(event.nativeEvent);
render() {
return (
<View>
<RCTVideo {...this.props} style = {styles.fullscreen} />
</View>
)
VideoView.propTypes = {
src: React.PropTypes.string,
play:React.PropTypes.func,
};
var RCTVideo = requireNativeComponent('RCTVideo', VideoView,
nativeOnly: {
src: true,
play: true,
)接下來看看其實作原理，了解react native與OC之間的通信我們首先需要了解子產品配置表，接下來對子產品配置表進行簡單的介紹：子產品配置表js如果要調用oc提供的接口方法，OC首先需要向JS傳遞它所有的子產品資訊。這裡的具體實作方法是OC生成一份子產品配置表傳給JS，配置表裡包括了所有子產品和子產品裡方法的信，具體資訊如下所示：{
"remoteModuleConfig": {
"RCTVideo": {
"methods": {
"play": {
"type": "remote",
"methodID": 0
},
"moduleID": 4
...
}OC與js之間的調用流程OC端和JS端分别各有一個bridge，兩個bridge都儲存了同樣一份子產品配置表，JS調用OC子產品方法時，通過bridge裡的配置表把子產品方法轉為子產品ID和方法ID傳給OC，OC通過bridge的子產品配置表找到對應的方法執行之，以上述代碼為例，流程大概是這樣（先不考慮callback）：
接下來看看JS調用OC子產品方法的詳細流程，包括callback回調，下面展示的是細化版本的調用流程圖：
詳細說明下這些步驟：
1.JS端調用某個OC子產品暴露出來的方法
2.把上一步的調用分解為ModuleName,MethodName,arguments，再扔給MessageQueue處理。
在初始化時子產品配置表上的每一個子產品都生成了對應的remoteModule對象，對象裡也生成了跟子產品配置表裡一一對應的方法，這些方法裡可以拿到自身的子產品名，方法名，并對callback進行一些處理，再移交給MessageQueue。
3.在這一步把JS的callback函數緩存在MessageQueue的一個成員變量裡，用CallbackID代表callback。在通過儲存在MessageQueue的子產品配置表把上一步傳進來的ModuleName和MethodName轉為ModuleID和MethodID。
4.把上述步驟得到的ModuleID,MethodId,CallbackID和其他參數argus傳給OC。
5.OC接收到消息，通過子產品配置表拿到對應的子產品和方法。
6.RCTModuleMethod對JS傳過來的每一個參數進行處理。
7.OC子產品方法調用完，執行block回調。
8.調用到第6步說明的RCTModuleMethod生成的block。
9.block裡帶着CallbackID和block傳過來的參數去調JS裡MessageQueue的方法invokeCallbackAndReturnFlushedQueue。
10.MessageQueue通過CallbackID找到相應的JS callback方法。
11.調用callback方法，并把OC帶過來的參數一起傳過去，完成回調。
概括一下整體流程如下
整個流程就是這樣，簡單概括下，差不多就是：JS函數調用轉ModuleID/MethodID -> callback轉CallbackID -> OC根據ID拿到方法 -> 處理參數 -> 調用OC方法 -> 回調CallbackID -> JS通過CallbackID拿到callback執行
參考文獻：http://reactnative.cn
原文連結：http://ivweb.io/topic/58227ac90fea59e31b98bb5d