RN与原生交互

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。

事件交互

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();
      }
    }