-
原生iOS项目中
- 创建一个继承NSObject的类
- 类中引入头文件 RCTBridgeModule.h
- 签订协议 <RCTBridgeModule>
- .m文件 引入头文件 RCTEventDispatcher.h
- .m文件 方法导出 RCT_EXPORT_MODULE()
- js调用原生方法 RCT_EXPORT_METHOD()
- 原生方法调用js
-
.h文件
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"//引入头文件
@interface RNModule : NSObject<RCTBridgeModule>//签订协议
@end
#import "RNModule.h"
#import "RCTEventDispatcher.h"
@implementation RNModule
//必写
RCT_EXPORT_MODULE()
//js调用原生方法
RCT_EXPORT_METHOD(RNTest:(NSString *)name age:(int)age){
NSLog(@"RN调用了原生方法 name：%@ ，age%d",name,age);
}
//桥接到Javascript的方法返回值必须是void。React native的桥接操作是异步的。所以要返回给Javascript，必须通过回调函数或者出触发事件
RCT_EXPORT_METHOD(jsCallback:(NSString *)jsString callBack:(RCTResponseSenderBlock)callback){
NSLog(@"调用了jsCallback函数 %@",jsString);
NSArray *events = [[NSArray alloc] initWithObjects:@"哈哈哈哈",@"回调函数", nil];
NSString *str = @"hhhhhhah 哈哈这是返回的字符串";
callback(@[[NSNull null],str]);
}
//oc调用js 间接调用 js->oc->js
@synthesize bridge = _bridge;
RCT_EXPORT_METHOD(OCTest){
[self ocCallJs];
}
- (void)ocCallJs{
NSDictionary *dict = @{@"name":@"lish-这是oc调用rn的方法",@"age":@25};
[self.bridge.eventDispatcher sendAppEventWithName:@"ocCallJs" body:dict];
}
@end
- import {
NativeModules,
} from 'react-native';
//js 调用原生函数 函数名 RNTest
var RN = NativeModules.RNModule;
//RNModule 这个是原生对应得文件名字
//OC调用js
var Js = NativeAppEventEmitter.addListener(
'ocCallJs',
(para)=> Alert.alert('被oc点击','字典数据:\n name:'+para.name+'\n age:'+para.age)
);
export default class test extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
};
}
componentWillUnmount() {
Js.remove();
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress = {()=>{
RN.OCTest()
}}>
<Text style={styles.welcome}>
OC调用RN方法
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {()=>{
RN.RNTest('Lishuang',25);
}}>
<Text style={styles.welcome}>
RN调用OC方法
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {()=>{
RN.jsCallback('Lishuang',(error,callBack)=>{
if(error){
Alert.alert({error})
}else{
//Alert.alert('J2O带返回值', '数组的三个值：\n[0]:'+callBack[0]+'\n[1]:'+callBack[1])
Alert.alert(callBack)
}
});
}}>
<Text style={styles.welcome}>
RN调用OC方法-带回调函数
</Text>
</TouchableOpacity>
</View>
);
}
}
demo下载
