ReactNative與原生代碼的通信(iOS篇)

從RN端發(fā)送消息到iOS端的過程:
iOS端在想給RN端調(diào)用的類文件中使用宏定義RCT_EXPORT_MODULE()導出這個類,并且使用宏定義RCT_EXPORT_METHOD()導出想給RN端調(diào)用的類方法,再遵守RCTBridgeModule協(xié)議,方法的實現(xiàn)是寫在iOS端的,這樣RN端通過調(diào)用這個方法就可以將想傳遞的參數(shù)傳到iOS端

iOS端代碼:
      @implementation ExampleInterface  
      RCT_EXPORT_MODULE(); //可以指定一個參數(shù)來訪問這個模塊,不指定就是這個類的名字(ExampleInterface)
      RCT_EXPORT_METHOD(sendMessage:(NSString *)msg){
              NSLog(@"從RN端接收到的信息%@",msg);
      }
RN端代碼:
      //原生端RCT_EXPORT_MODULE()導出的類
      let ExampleInterface = require('react-native').NativeModules.ExampleInterface
      ExampleInterface.sendMessage('{\"msgType\":\"pickContact\"}')

從iOS端發(fā)送消息到RN端:
iOS發(fā)送消息到RN端分為2種情況,一種是接收到RN端的消息,處理完畢后返回,另外一種是主動發(fā)送消息到RN端,對于第一種通常是使用Promise機制,第二種RN端使用的NativeAppEventEmitter接收器,iOS端通過eventDispatcher發(fā)送

情況一 iOS端代碼:
      @implementation ExampleInterface        
      RCT_EXPORT_MODULE(); //可以指定一個參數(shù)來訪問這個模塊,不指定就是這個類的名字(ExampleInterface)
      RCT_EXPORT_METHOD(sendMessage:(NSString *)msg,resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject){
              NSLog(@"從RN端接收到的信息%@",msg);
              NSString *msgAdd = [msg stringByAppendingString:@"123"];  //對接收到的信息進行處理
              resolve(msgAdd); //通過此代碼塊回調(diào)到RN端
      }
情況一 RN端代碼:
      let ExampleInterface = require('react-native').NativeModules.ExampleInterface
      ExampleInterface.sendMessage('{\"msgType\":\"pickContact\"}').then(
          (result)=>{
            console.log('原生端結果')
            console.log(result)
          }
      ).catch(
          (error)=>{
            console.log('錯誤信息');
            console.log(error)
            console.log(error.message)
            console.log(error.code)
            console.log(error.nativeStackIOS);
            console.log(error.nativeStackIOS.length)
          }
      )
情況二iOS端代碼:
      @implementation ExampleInterface  
      @synthesize bridge = _bridge;
      RCT_EXPORT_MODULE(); //可以指定一個參數(shù)來訪問這個模塊,不指定就是這個類的名字(ExampleInterface)
      -(void)sendMessageToRN{
            [self.bridge.eventDispatcher sendAppEventWithName@"NativeModuleMsg" body:@"原生消息"];
      }
情況二RN端代碼:
      NativeAppEventEmitter.addListener('NativeModuleMsg', (reminder)=>{ //監(jiān)聽的事件的名稱(NativeModuleMsg)和原生端發(fā)送的要一樣
            console.log('原生端的消息'+reminder);
      })
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容