React与安卓/iOS通信实践

import { eventEmmiter } from "./eventEmmiter";

let Bridge = {
  // 统一接口请求参数&类型，方便多平台调用
  ios: function(event, params, needCallback = true) {
    return new Promise(resolve => {
      console.log(
        `invoke iOS.event[${event}] with params: ${JSON.stringify(params)}`
      );
      if (!params) params = {};
      const callbackEvent = this.getCallbackEvent(event);
      if (needCallback) {
        eventEmmiter.once(callbackEvent, res => {
          console.log(`callback iOS.event[${callbackEvent}] with data: ${res}`);
          if (res && typeof res === "string") res = JSON.parse(res);
          resolve(res);
        });
      }
      // 字符串化参数
      let msg = JSON.stringify({
        method: event,
        data: params,
        callback: callbackEvent
      });
      console.log(`send iOS msg ${JSON.stringify(msg)}`);
      // native 为 wkwebview 注册的对象
      webkit.messageHandlers.native.postMessage(msg);
    });
  },

  // 统一接口请求参数&类型，方便多平台调用
  android: function(event, params, needCallback = true) {
    return new Promise(resolve => {
      console.log(
        `invoke Android.event[${event}] with params: ${JSON.stringify(params)}`
      );
      if (!params) params = {};
      const callbackEvent = this.getCallbackEvent(event);
      if (needCallback) {
        eventEmmiter.once(callbackEvent, res => {
          console.log(
            `callback Android.event[${callbackEvent}] with data: ${res}`
          );
          if (res && typeof res === "string") res = JSON.parse(res);
          resolve(res);
        });
      }
      let msg = JSON.stringify({
        method: event,
        data: params,
        callback: callbackEvent
      });
      console.log(`send Android msg ${JSON.stringify(msg)}`);
      // Android 为安卓侧注册的对象
      Android[event](msg);
    });
  },

  // 生成随机事件，防止多次点击重复调用
  getCallbackEvent: function(event) {
    return (
      event + "-" + new Date().getTime() + "-" + (Math.random() * 100).toFixed()
    );
  }
};

export default Bridge;

// 根据 URL 约定的字段来判断当前在什么平台
// eg: /detail/123?sitecode=ios
// 调用时根据平台调用 Bridge.ios / Bridge.android
if (inIOSAPP()) {
  // 给 iOS 侧发登录请求，iOS侧弹出原生登录页，完成登录后回调
  Bridge.ios(LOGIN_EVENT).then(res => {
    // save user info
  });
} else if (inAndroidAPP()) {
  Bridge.android(LOGIN_EVENT).then(res => {
    // save user info
  });
} else {
  // 原生浏览器，弹出登录框
  this.toggleLoginModal();
}

componentDidMount() {
    eventEmmiter.on(SOME_EVENT, (res) => {
        console.log(res)
    });
}