React Native常用功能开发总结（IOS）

摘要：为函数名称，设置这个主要是为了将多个暴露方法统一管理。调用如下原生如何直接调用有时候单原生触发了某一操作时，应用需要响应，然后执行相应的操作。

一.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为函数名称，设置这个主要是为了将多个暴露方法统一管理。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的数据需要重新渲染。

三.如何调用原生组件

四.常见错误解决方式

后续会继续补充，如有错误的地方，还请小伙伴们指出一起交流，谢谢~
源码地址:点这里