上一篇文章记录了,在原生项目中如何集成RN页面,既然有页面就肯定有交互,这篇文章记录下RN和原生页面的交互,本质上是利用通知的形式进行交互!
RN页面:
1、在RN页面的import里面添加引入NativeModules
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NativeModules
} from 'react-native';
2、得到响应者:
var RNModules = NativeModules.RTModules;
里面的RTModules是需要跟原生页面约定好的响应者(也可以是原生页面的类名)
3、添加响应事件:
class credit extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVCa('测试') }>
<Text>Hello World!</Text>
</TouchableOpacity>
<TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVC('测试111') }>
<Text>Hello World!</Text>
</TouchableOpacity>
</View>
);
}
}
其中RNModules.RNOpenOneVCa中的RNOpenOneVCa是要跟原生界面约定好的响应方法
原生页面:
1、在需要监听的类中引入类
#import "RCTBridgeModule.h"
2、遵循协议:<RCTBridgeModule>
@interface BMCRNModules : NSObject<RCTBridgeModule>
3、RN提供了监听通知的宏:
RCT_EXPORT_MODULE(RTModules)
其中RTModules是需要跟RN里面NativeModules约定好的响应者(此处也可以为空,如果为空的话,在RN页面的对应位置就写上该类的类名)!
然后在宏RCT_EXPORT_METHOD里面写好响应代码:
RCT_EXPORT_METHOD(RNOpenOneVCa:(NSString *)msg){
NSLog(@"RN传入原生界面的数据为:%@ %@",msg,[NSThread currentThread]);
//主要这里必须使用主线程发送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
});
}
其中RNOpenOneVCa是跟RN约定好的响应方法!
最终代码:
RN:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NativeModules
} from 'react-native';
var RNModules = NativeModules.RTModules;
class credit extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVCa('测试') }>
<Text>Hello World!</Text>
</TouchableOpacity>
<TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVC('测试111') }>
<Text>Hello World!</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor : 'red',
height:100,
flexDirection : 'row'
},
});
AppRegistry.registerComponent('credit', () => credit);
原生代码:
RCT_EXPORT_MODULE(RTModules)
//RN跳转原生界面
RCT_EXPORT_METHOD(RNOpenOneVCa:(NSString *)msg){
APP_LOG_INFO(@"RN传入原生界面的数据为:%@ %@",msg,[NSThread currentThread]);
//主要这里必须使用主线程发送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
});
}
//RN跳转原生界面1
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){
APP_LOG_INFO(@"RN传入原生界面的数据为:%@ %@",msg,[NSThread currentThread]);
//主要这里必须使用主线程发送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
});
}