摘要：為函數名稱，設置這個主要是為了將多個暴露方法統(tǒng)一管理。調用如下原生如何直接調用有時候單原生觸發(fā)了某一操作時，應用需要響應，然后執(zhí)行相應的操作。

一.RN如何調用原生方法

1. 原生暴露方法(這里myclass為暴露原生方法模塊)

//myclass.h (所有提供給RN使用的方法都得繼承RCTBridgeModule類)

#import 
#import "RCTBridgeModule.h"

@interface MyClass : NSObject

@end

//myclass.m
#import "MyClass.h"
#import "RCTBridge.h"

@implementation MyClass
@synthesize bridge = _bridge;

//暴露模塊
RCT_EXPORT_MODULE();

//暴露方法（這里暴露了addEvent方法。 actionType為函數名稱，設置這個主要是為了將多個暴露方法統(tǒng)一管理。propertyDic為RN調用時傳入的參數）
RCT_EXPORT_METHOD(addEvent:(NSString *)actionType actionName:(NSString *)actionName propertyDic:(NSDictionary*)propertyDic callbackEvents:(RCTResponseSenderBlock)callback)
{
  if ([actionType isEqualToString:@"Nav"]) {
      KTVListenWorkVC* vc = [[KTVListenWorkVC alloc] init];
      vc.opusId = [propertyDic[@"opusId"] longLongValue];
      [[KGMainViewController shareMainViewController] pushViewControllerToKGNavigation:vc animated:YES];
      
  }else if([actionType isEqualToString:@"http"]){
      KTVHttpPostRequstData * postHttpRequstData = [[KTVHttpPostRequstData alloc] init];
      postHttpRequstData.requstDic = propertyDic;
      callback(@[[postHttpRequstData toRequstURL]]);
  }
}

2. js調用原生方法
import {NativeModules} from "react-native";
var nativeMethod = NativeModules.MyClass;

//第一個參數為原生暴露的方法名， 第二個參數隨便寫， 第三個是回調函數（data為執(zhí)行原生方法后返回的參數）
nativeMethod.addEvent("http", "aaaa", function(data){
    callback()
}

二.如何實現RN跳轉到原生頁面

//其實RN跳轉原生的原理比較簡單，在ios中就是初始化一個類，也就是上面暴露的Nav方法。

js調用如下
nativeMethod.addEvent("Nav", "aaaa", {"opusId": this.props.opusId}, function(){})

原生如何直接調用RN

有時候單原生觸發(fā)了某一操作時，RN應用需要響應，然后執(zhí)行相應的操作。這里分兩個步驟：

1.RN注冊監(jiān)聽事件
//首頁導入監(jiān)聽事件模塊并注冊監(jiān)聽事件（這里其實有多個模塊可以調用，詳細可以看RCTEventDispatcher文件源碼）

import RCTNativeAppEventEmitter from "RCTNativeAppEventEmitter"; 

//這個方法是單城市選擇改變時，顯示的數據實時改變
RCTNativeAppEventEmitter.addListener("changeCityCode",function(result){
     ......
})

2 原生派發(fā)事件（在myclass尾部加入下面代碼，并導入RCTEventDispatcher模塊）
#import "RCTEventDispatcher.h"

//重寫bridge方法
- (void)setBridge:(RCTBridge *)bridge {
    _bridge = bridge;
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(receiveCityChangeNotifaction:)
                                                 name:KTV_CHANGE_CITY_NOTYFY
                                               object:nil];
    
}
- (void)receiveCityChangeNotifaction: (NSNotification *)notify
{
    
    NSDictionary * info = notify.userInfo;
    KTVCityModel * city = [info objectForKey:@"selectedCity"];
    if (city && [city isKindOfClass:[KTVCityModel class]]) {
    
    
    NSDictionary * notifyInfo = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithInteger: city.cityCode], @"citycode", nil];
    
    [self.bridge.eventDispatcher sendAppEventWithName:@"changeCityCode" body:notifyInfo];
    }
}
@end

應用場景如下，上面紅色框部分為原生的，RN應用是嵌入到原生試圖的，當原生改變城市時，RN的數據需要重新渲染。

三.如何調用原生組件

四.常見錯誤解決方式

后續(xù)會繼續(xù)補充，如有錯誤的地方，還請小伙伴們指出一起交流，謝謝~
源碼地址:點這里