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

一.RN如何調(diào)用原生方法

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為函數(shù)名稱，設(shè)置這個(gè)主要是為了將多個(gè)暴露方法統(tǒng)一管理。propertyDic為RN調(diào)用時(shí)傳入的參數(shù)）
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調(diào)用原生方法
import {NativeModules} from "react-native";
var nativeMethod = NativeModules.MyClass;

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

二.如何實(shí)現(xiàn)RN跳轉(zhuǎn)到原生頁(yè)面

//其實(shí)RN跳轉(zhuǎn)原生的原理比較簡(jiǎn)單，在ios中就是初始化一個(gè)類，也就是上面暴露的Nav方法。

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

原生如何直接調(diào)用RN

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

1.RN注冊(cè)監(jiān)聽(tīng)事件
//首頁(yè)導(dǎo)入監(jiān)聽(tīng)事件模塊并注冊(cè)監(jiān)聽(tīng)事件（這里其實(shí)有多個(gè)模塊可以調(diào)用，詳細(xì)可以看RCTEventDispatcher文件源碼）

import RCTNativeAppEventEmitter from "RCTNativeAppEventEmitter"; 

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

2 原生派發(fā)事件（在myclass尾部加入下面代碼，并導(dǎo)入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

應(yīng)用場(chǎng)景如下，上面紅色框部分為原生的，RN應(yīng)用是嵌入到原生試圖的，當(dāng)原生改變城市時(shí)，RN的數(shù)據(jù)需要重新渲染。

三.如何調(diào)用原生組件

四.常見(jiàn)錯(cuò)誤解決方式

后續(xù)會(huì)繼續(xù)補(bǔ)充，如有錯(cuò)誤的地方，還請(qǐng)小伙伴們指出一起交流，謝謝~
源碼地址:點(diǎn)這里