React Native常用功能开发总结(IOS)
发布时间:2020-12-15 03:25:43 所属栏目:百科 来源:网络整理
导读:一.RN如何调用原生方法 1. 原生暴露方法(这里myclass为暴露原生方法模块)//myclass.h (所有提供给RN使用的方法都得继承RCTBridgeModule类)#import Foundation/Foundation.h#import "RCTBridgeModule.h"@interface MyClass : NSObjectRCTBridgeModule@end//my
一.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的数据需要重新渲染。 三.如何调用原生组件四.常见错误解决方式后续会继续补充,如有错误的地方,还请小伙伴们指出一起交流,谢谢~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- xml解析
- 利用Digester实现xml和bean之间的转换(二)
- 正则表达式 – 正则表达式匹配任何URL参数值(Perl语法)
- postgresql – 由于锁定文件的权限被拒绝,无法启动Postgres
- cocos2dx 3.17(Windows下) 接入skynet和sprotol
- 读取XML ,IOS、Android、PC
- Dojo Spreadsheet Widget - 基于Ajax的Excel
- FlexViewer3.4中CompositeSymbol复合型标注中添加图片与文字
- Flex之Tree组件(修改图标,加复选框)
- 关于XML文档的xmlns、xmlns:xsi和xsi:schemaLocation