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',{'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的数据需要重新渲染。

三.如何调用原生组件

四.常见错误解决方式

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