基础:iOS原生项目集成reactnative(可参考我的这篇文章http://www.jianshu.com/writer#/notebooks/22019322/notes/23731074)
不足之处请指出。
一:React Native调用ios代码,但无需返回值
1)RN部分
activeEvent(){//此方法写在index.js的组件渲染中
var BridgeManager = require('react-native').NativeModules.BridgeManager;//BridgeManager为ios原生项目接收RN调用的类名
BridgeManager.rnCallOCNative('Hello Victor ,I am RN call OC');
}
<TouchableOpacity style={styles.textBg} onPress={() =>this.activeEvent()}>
<Text style={styles.contentText}>RN调用OC(无结果返回)></Text>
</TouchableOpacity>
2)ios原生部分
新建BridgeManager(注意类名和RN中的保持一致)类,继承自NSObject
.m文件先#import <React/RCTBridgeModule.h>
RCT_EXPORT_MODULE();// 导出模块,不添加参数即默认为这个类名
RCT_EXPORT_METHOD(rnCallOCNative:(NSString*)testStr){
//在此方法中接受rn传递的参数即可
NSLog(@"%@",testStr);/
}
二、React Native调用ios代码,需返回值
callOChaveResult(){
var BridgeManager = require('react-native').NativeModules.BridgeManager;
BridgeManager.rnCallOCNativeHaveRes(('RN->原生的数据'),(error,events) => {
if(error) {
console.warn(error);
}else{
alert(events)//返回的数据
}
});
}
<TouchableOpacity style={styles.textBg} onPress={() =>this.callOChaveResult()}>
<Text style={styles.contentText}>RN调用OC(无结果返回)</Text>
<TouchableOpacity>
以上为主要代码,下面给出我这边测试写的布局style
varstyles = StyleSheet.create({
container: {
flex:1,
backgroundColor:"white",
justifyContent:'center',
alignItems:'center',
},
textBg:{
justifyContent:'center',
alignItems:'center',
width:200,
height:40
},
contentText: {
fontSize:17,
flex:1
},
})