一、无回调通信
1.第一步 在iOS工程里面创建一个对象RNToNativeManager 并遵循RCTBridgeModule协议(需要引入#import <React/RCTBridgeModule.h> #import <React/RCTLog.h>头文件)
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface RNToNativeManaer : NSObject<RCTBridgeModule>
@end
第二步 在.m文件需要包含RCT_EXPORT_MODULE()宏,而且要在RCT_EXPORT_METHOD这个宏里面跑出来供javaScript调用的方法()(注意如果要在这个方法里面操作view要回到主线程)
#import "RNToNativeManaer.h"
@implementation RNToNativeManaer
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
RCTLogInfo(@"creat an event%@ at %@",name,location);
[[NSNotificationCenter defaultCenter]postNotificationName:@"push" object:self];
}
@end
第三步 在js端调用native跑出来的这个方法(这里要引入NativeModules)
var RNToNativeManaer = NativeModules.RNToNativeManaer;
class App extends Component{
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
w:100,
h:100,
};
this.handlePress=this.handlePress.bind(this);
}
handlePress(){
RNToNativeManaer.addEvent(' Party','street');
}
render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress={this.handlePress}><Text >123</Text></TouchableOpacity>
</View>
);
}
}
在这里要注意: Javascript方法名
导出到Javascript的方法名是Objective-C的方法名的第一个部分。React Native还定义了一个RCT_REMAP_METHOD()宏,它可以指定Javascript方法名。当许多方法的第一部分相同的时候用它来避免在Javascript端的名字冲突。且桥接到Javascript的方法返回值类型必须是void。
二、回调函数通信
回调函数RCTResponseSenderBlock,它可以把返回值传给javaScript.
native跑出来的方法如下
RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callBack){
NSArray *array =@[@"1",@"2"];
callBack(@[[NSNull null],array]);
}
reactNative端代码
把上面的handlePress函数内容替换如下就可以了
handlePress(){
// RNToNativeManaer.addEvent(' Party','street');
RNToNativeManaer.findEvents((error,events)=>{
if (error){
console.log(error);
}else {
console.log(events);
this.setState({
event:events,
});
}
});
}