React Native經常使用功能開發總結（IOS）

一.RN如何調用原生方法

1. 原生暴露方法(這裏myclass爲暴露原生方法模塊)

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

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface MyClass : NSObject<RCTBridgeModule>

@end

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

@implementation MyClass
@synthesize bridge = _bridge;

//暴露模塊
RCT_EXPORT_MODULE();

//暴露方法（這裏暴露了addEvent方法。 actionType爲函數名稱，設置這個主要是爲了將多個暴露方法統一管理。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爲執行原生方法後返回的參數）
nativeMethod.addEvent('http', 'aaaa', function(data){
    callback()
}

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

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

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

原生如何直接調用RN

有時候單原生觸發了某一操做時，RN應用須要響應，而後執行相應的操做。這裏分兩個步驟：

1.RN註冊監聽事件
//首頁導入監聽事件模塊並註冊監聽事件（這裏其實有多個模塊能夠調用，詳細能夠看RCTEventDispatcher文件源碼）

import RCTNativeAppEventEmitter from 'RCTNativeAppEventEmitter'; 

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

2 原生派發事件（在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的數據須要從新渲染。

三.如何調用原生組件

四.常見錯誤解決方式

後續會繼續補充，若有錯誤的地方，還請小夥伴們指出一塊兒交流，謝謝~
源碼地址:點這裏