原生接收RN传递的数据
效果图
IOS 文件
1. RNToNativeManager.h 文件
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface RNToNativeManager : NSObject<RCTBridgeModule>
@end
为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字
2. RNToNativeManager.m 文件
@implementation RNToNativeManager
RCT_EXPORT_MODULE();
/**
接收RN传过来的 NSString
@param NSString 字符串
*/
RCT_EXPORT_METHOD(addEvent:(NSString *)name){
NSLog(@"接收传过来的NSString+NSString: %@", name);
}
/**
接收RN传过来的 NSString + dictionary
@param NSString 字符串
@param NSDictionary 字典
@return
*/
RCT_EXPORT_METHOD(addEventTwo:(NSString *)name DetailData:(NSDictionary *)data){
NSLog(@"接收到RN传递过得string + dictionary ,%@,%@ ",name,data);
}
/**
接收RN传过来的 NSString + date日期
@param NSString 字符串
@param NSDate data数据
@return <#return value description#>
*/
RCT_EXPORT_METHOD(addEventThree:(NSString *)name Date:(NSDate *)date){
NSDateFormatter *formatter = [[NSDateFormatter alloc] init] ;
[formatter setDateFormat:@"yyyy-MM-dd"];
NSLog(@"接收传过来的NSString+NSDictionary: %@ %@", name, [formatter stringFromDate:date]);
}
/**
接收RN传过来的 callback
@param NSString 字符串
@return <#return value description#>
*/
RCT_EXPORT_METHOD(TextCallBackOne:(NSString *)name CallBack:(RCTResponseSenderBlock)callback){
NSLog(@"%@",name);
NSArray *arr = @[@"1",@"2",@"3",@"4",];
// [NSNull null] 返回RN用来判断
callback(@[[NSNull null],arr]);
}
//Promises
/**
对外提供调用方法,演示Promise使用（resolve block回调出去的值id）
@param TextCallBackTwo <#TextCallBackTwo description#>
@param RCTPromiseResolveBlock <#RCTPromiseResolveBlock description#>
@return <#return value description#>
*/
RCT_REMAP_METHOD(TextCallBackTwo, Resolver:(RCTPromiseResolveBlock)resolve Rejecter:(RCTPromiseRejectBlock)reject){
NSArray *arr = @[@"5",@"6",@"7",@"8",];
if (arr) {
resolve(arr);
}else{
NSError *error;
NSString *message = @"这是错误信息。。。。";
reject(@"199",message,error);
}
}
-(NSDictionary *)constantsToExport{
return @{@"first":@"Native"};
}
ReactNative
_One(){
RNToNativeManager.addEvent('这是RN 到原生的值');
}
_two(){
RNToNativeManager.addEventTwo('这是RN 到原生的值',{rn:'这是字典'});
}
_three(){
RNToNativeManager.addEventTwo('这是RN 到原生的值',20170607);
}
_textCallback(){
RNToNativeManager.TextCallBackOne(('这是RN 到原生的值'),(error,events)=>{
if(error){
console.log(error);
} else{
alert(events);
}
})
}
//Promise回调
async _CallbackTwo(){
try{
var evevts = await RNToNativeManager.TextCallBackTwo();
console.log(evevts);
// alert(events)
}catch (e){
console.log(e);
}
}
_constantsToExport(){
console.log(RNToNativeManager.first);
}
_randerContent(){
return(
<View style = {styles.container}>
<View style = {styles.navigator}>
</View>
<View style = {[styles.center]}>
<Text style = {styles.textStyle} onPress = {this._One}>把值带给原生界面 string</Text>
<Text style = {styles.textStyle} onPress = {this._two}>把值带给原生界面 string + dic</Text>
<Text style = {styles.textStyle} onPress = {this._three}>把值带给原生界面 string + date</Text>
<Text style = {styles.textStyle} onPress = {this._textCallback}>把值带给原生界面 string + 回调 </Text>
<Text style = {styles.textStyle} onPress = {this._CallbackTwo}>把值带给原生界面 Promise回调 </Text>
<Text style = {styles.textStyle} onPress = {this._constantsToExport}>把值带给原生界面 + native </Text>
</View>
</View>
)
}
render() {
return(
this._randerContent()
)
}
交互文件
1.首先获取AppDelegate 中的导航控制器，
2.push到对应的控制器
RCT_REMAP_METHOD(pushDataEvent,
Resolvor:(RCTPromiseResolveBlock)resolv
Rejector:(RCTPromiseRejectBlock)reject
){
AppDelegate *delegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
NSLog(@"%@",delegate.window.rootViewController);
//跳转界面
//主要这里必须使用主线程发送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
UINavigationController *navi = (UINavigationController *)delegate.window.rootViewController;
QRCodeViewController *pushVC = [[QRCodeViewController alloc] init];
pushVC.popBlock = ^(NSString *urlStr) {
if (urlStr) {
resolv(urlStr);
}else{
reject(@"199",@"没有链接",nil);
}
};
[navi pushViewController:pushVC animated:YES];
});
}
demo地址
参考文章 rectnative 中文网
