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

三.如何调用原生组件

四.常见错误解决方式

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

关键字：ios, JavaScript

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！