React Native 框架在 React 框架的基础上,底层通过对 iOS 平台与 Android 平台原生代码的封装与调用,结合前台的 JavaScript 代码,这样我们就可以通过 JavaScript 代码编写出调用 iOS 平台与 Android 平台原生代码的 App,调用原生代码编写的 App 的性能远远优于使用 HTML 5 开发的 App 性能,因为 HTML 5 开发的 App 只是在 HTML 5 外部包裹上一个程序外壳后在移动平台上运行,在性能与可以实现的功能上都不能达到 React Native 框架的水准。
RN与原生交互,其实是在原生端创建Module类通过桥接的方式导出到JS端供JS代码调用原生端代码来实现。原生流程
1编写原生模块的相关代码;
2暴露接口与数据交互;
需要借助React Native的ReactContextBaseJavaModule类。
3注册与导出React Native原生模块;
需要借助ReactPackage。
js调用
import { NativeModules } from 'react-native';
export default NativeModules.模块;
数据交互
JS向原生模块传递数据
可以直接通过调用原生模块所暴露出来的接口,来为接口方法设置参数,这样就可以将数据通过接口参数传递到原生模块中。
原生模块向JS传递数据事件交互
原生模块向JS传递数据我们可以借助Callbacks与Promises。
【RN与原生交互】1原生向js发送事件
2js监听
import { DeviceEventEmitter, Platform, NativeEventEmitter } from 'react-native';
componentWillMount(){
if(Platform.OS==='android'){
this.listener=DeviceEventEmitter.addListener('EventRefresh', ()=>{
xxx;
});
}else {
const navigationEmitter = new NativeEventEmitter(xxx);
this.listener=navigationEmitter.addListener('EventRefresh', () => {
xxx;
}
}
}componentWillUnmount() {
if (this.listener) {
this.listener.remove();
}
}