react-native与原生三种交互模式

RCTDeviceEventEmitter方式

public class MyEventEmitter {
  private final ReactApplicationContext reactContext;

  public MyEventEmitter(ReactApplicationContext reactContext) {
    this.reactContext = reactContext;
  }

  public void sendEvent(String eventName, WritableMap eventData) {
    reactContext
      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
      .emit(eventName, eventData);
  }
}

CallBack方式

Promise方式

Android

以Toast模块为例

1. 创建模块
   1. 创建一个新的 Java 类并命名为ToastModule.java，放置到android/app/src/main/java/com/your-app-name/目录下
   2. 这个函数用于返回一个字符串名字，这个名字在 JavaScript 端标记这个模块
   3. 导出一个方法给 JavaScript 使用，Java 方法需要使用注解@ReactMethod（React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件）
2. 注册模块
   1. 创建一个新的 Java 类并命名为CustomToastPackage.java，放置到android/app/src/main/java/com/your-app-name/目录下
   2. 这个 package 需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的 react-native 应用文件夹的 android 目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java
   3. 封装一个 JavaScript 模块，省下了每次都从NativeModules中获取对应模块的步骤。
3. 其他特性
   1. 回调函数
   2. Promise

ios

npm 包分发

开发自己的react-native组件并发布到npm - 简书 (jianshu.com) (opens new window)

1. 创建自定义组件模版项目

   npx @react-native-community/bob create react-native-awesome-module
   

2. 引入libs包

3. 编写Android Native Module桥接代码（和接原生sdk一样）

4. 在react-native-awesome-module\src\index.tsx中编写JS代码，使用桥接代码并往外暴露

5. 发布前准备

   1. .gitignore 和 .npmignore

      在.gitignore中定义哪些文件不上传到github中

      在.npmignore中定义哪些文件发布时不打包

      如果有.gitignore但是没有.npmignore文件，那么.gitignore可以充当.npmignore的作用

   2. package.json文件定义了发布的所有信息，包括：组件名、版本、作者、描述、依赖等等关键信息。

6. 组件发布

   1. npm registry
   2. npm adduser
   3. npm login

7. 发布（如果不是首次发布，需要更改版本号）

   npm publish
   

8. 本地代码测试

   npm i react-native-awesome-module
   

9. 编写JS代码，使用在第四步中往外暴露的方法