Android React Native 原生模块和 JS 模块交互

   <h2>1. JS 模块调用原生模块方法</h2>    <h3>1.1 ReactContextBaseJavaModule</h3>    <p>创建一个原生模块 ZanIntentModule 并继承抽象类 ReactContextBaseJavaModule ，同时实现几个方法。</p>    <pre>  <code class="language-javascript">public classZanIntentModuleextendsReactContextBaseJavaModule{        publicZanIntentModule(ReactApplicationContext reactContext){          super(reactContext);      }        @Override      publicStringgetName(){          return "ZanIntentModule";      }        @Override      publicMap<String, Object>getConstants(){          final Map<String, Object> constants = new HashMap<>();          return constants;      }        /**       * js call native to start activity       *       * @param toActivityName       * @param map       */      @ReactMethod      publicvoidstartActivity(String toActivityName, ReadableMap map){          try {              Activity currentActivity = getCurrentActivity();                if (currentActivity != null) {                  Class toActivity = Class.forName(toActivityName);                  Intent intent = getActivityIntent(currentActivity, toActivity, map);                  currentActivity.startActivity(intent);              }          } catch (Exception e) {              throw new JSApplicationIllegalArgumentException(                      "Could not open Activity : " + e.getMessage());          }      }  }  </code></pre>    <p>getName()</p>    <pre>  <code class="language-javascript">@Override  publicStringgetName(){      return "ZanIntentModule";  }  </code></pre>    <p>这个函数用于 返回一个字符串名字，这个名字在 JavaScript 端标记这个模块 。这里我们把这个模块命名为 ZanIntentModule ，这样就可以在 JavaScript 中通过 NativeModules.ZanIntentModule 访问到这个模块。</p>    <p>getConstants()</p>    <pre>  <code class="language-javascript">@Override  publicMap<String, Object>getConstants(){      final Map<String, Object> constants = new HashMap<>();      return constants;  }  </code></pre>    <p>如果需要在 Java 和 JavaScript 之间定义常量，则要覆盖这个方法，返回需要导出给 JavaScript 使用的常量。</p>    <p>@ReactMethod</p>    <p>要导出一个方法给 JavaScript 使用，Java 方法需要使用注解 @ReactMethod ，方法的返回类型必须为 void 。React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件。</p>    <pre>  <code class="language-javascript">@ReactMethod  publicvoidstartActivity(String toActivityName, ReadableMap map){      try {          Activity currentActivity = getCurrentActivity();            if (currentActivity != null) {              Class toActivity = Class.forName(toActivityName);              Intent intent = getActivityIntent(currentActivity, toActivity, map);              currentActivity.startActivity(intent);          }      } catch (Exception e) {          throw new JSApplicationIllegalArgumentException(                  "Could not open Activity : " + e.getMessage());      }  }  </code></pre>    <p>在 JavaScript 中可以这样调用</p>    <pre>  <code class="language-javascript">NativeModules.ZanIntentModule.startActivity(      'com.danke77.sample.activity.WebViewActivity',      {        'url': url      })  </code></pre>    <h3>1.2 注册模块</h3>    <p>创建一个 Package 类 ZanReactPackage 并实现 ReactPackage ，在 createNativeModules 方法中添加这个模块。</p>    <pre>  <code class="language-javascript">public classZanReactPackageimplementsReactPackage{      @Override      publicList<NativeModule>createNativeModules(ReactApplicationContext reactContext){          List<NativeModule> modules = new ArrayList<>();          modules.add(new ZanIntentModule(reactContext));          return modules;      }        @Override      public List<Class<? extends JavaScriptModule>> createJSModules() {          return Collections.emptyList();      }        @Override      publicList<ViewManager>createViewManagers(ReactApplicationContext reactContext){          return Collections.emptyList();      }  }  </code></pre>    <h3>1.3 添加模块</h3>    <p>在 Application 中的 ReactNativeHost 实例里 getPackages 方法添加 ZanReactPackage 实例</p>    <pre>  <code class="language-javascript">@Override  protectedList<ReactPackage>getPackages(){      return Arrays.<ReactPackage>asList(          new MainReactPackage(),          new ZanReactPackage()      );  }  </code></pre>    <h3>1.4 回调函数</h3>    <p>Callback</p>    <p>Callback 是 com.非死book.react.bridge 中的一个接口，作为 ReactMethod 的一个传参，用来映射 JavaScript 的回调函数（function）。</p>    <p>Callback 接口只定义了一个方法 invoke，invoke 接受多个参数，这个参数必须是 com.非死book.react.bridge 中支持的参数。</p>    <pre>  <code class="language-javascript">@ReactMethod  publicvoidlogin(String name, String password, Callback success, Callback failure){      try {          if (TextUtils.isEmpty(name)) {              failure.invoke("name is empty");              return;          }          if (TextUtils.isEmpty(password)) {              failure.invoke("password is empty");              return;          }            if (new LoginTask().login(name, password)) {              success.invoke(name);          } else {              failure.invoke("login failure");          }      } catch (Exception e) {          e.printStackTrace();          failure.invoke(e.getMessage());      }  }  </code></pre>    <p>在 JavaScript 中可以这样调用</p>    <pre>  <code class="language-javascript">NativeModules.LoginModule.login('name', 'password', (name) => {      alert(name)    }, (err) => {      alert(err)    })  </code></pre>    <p>Promise</p>    <p>Promise 是 ES6 中增加的对于异步编程和回调更加友好的 API。</p>    <p>在 com.非死book.react.bridge 中定义的 Promise 接口，实现了 resolve 和 reject 方法， resolve 用来处理正确结果， reject 用来处理异常。</p>    <pre>  <code class="language-javascript">@ReactMethod  publicvoidlogin(String name, String password, Promise promise){      try {          if (TextUtils.isEmpty(name)) {              promise.reject("-1", "name is empty");              return;          }          if (TextUtils.isEmpty(password)) {              promise.reject("-2", "password is empty");              return;          }            if (new LoginTask().login(name, password)) {              WritableMap map = Arguments.createMap();              map.putString("name", name);              promise.resolve(map);          } else {              promise.reject("-3", "login failure");          }      } catch (Exception e) {          e.printStackTrace();          promise.reject(e);      }  }  </code></pre>    <p>在 JavaScript 中可以这样调用</p>    <pre>  <code class="language-javascript">NativeModules.LoginModule.login('name', 'password')      .then(        (map) => {          alert(map.name)        }      )      .catch(        (code, err) => {          alert(err)        }      )  </code></pre>    <p>或者用 async/await 来修饰，以同步方式调用原生模块</p>    <pre>  <code class="language-javascript">async login() {      try {        var {          name        } = await NativeModules.LoginModule.login('name', 'password')          alert(name)      }      catch (code, err) {        alert(err)      }  }  </code></pre>    <p>在原生模块中 Promise 类型的参数必须要放在最后一位，这样 JavaScript 调用的时候才能返回一个 Promise。</p>    <h2>2. 原生模块发送事件到 JS 模块</h2>    <p>原生模块可以在没有被调用的情况下往 JavaScript 发送事件通知。</p>    <pre>  <code class="language-javascript">protectedvoidsendEvent(ReactContext reactContext,                           String eventName,                           @Nullable WritableMap params) {      reactContext              .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)              .emit(eventName, params);  }  </code></pre>    <p>发送事件时</p>    <pre>  <code class="language-javascript">WritableMap params = Arguments.createMap();  params.putInt("unread", unreadCount);  sendEvent(getReactApplicationContext(), "onRefreshMessage", params);  </code></pre>    <p>向 JavaScript 模块发送了一个名为 onRefreshMessage 的事件，并携带了 params 作为参数。</p>    <p>JavaScript 模块可以通过使用 DeviceEventEmitter 模块来监听事件</p>    <pre>  <code class="language-javascript">componentDidMount() {      DeviceEventEmitter.addListener('onRefreshMessage', this.onUpdateMessage)  }    componentWillUnmount() {      DeviceEventEmitter.removeListener('onRefreshMessage', this.onUpdateMessage)  }    onUpdateMessage = (e) => {      alert(e.unread)  }  </code></pre>    <p> </p>    <p>来自：https://danke77.github.io/2016/12/07/react-native-native-modules-android/</p>    <p> </p>