H5调用app的方法

app-bridge.js 文件

import detector from 'detector';

let isInited = false;

export function isIOS() {
  return !!detector.os.ios;
}

export function setupWebViewJavascriptBridge(callback) {
  if (isIOS()) {
    if (window.WebViewJavascriptBridge) {
      return callback(window.WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    const WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(() => {
      document.documentElement.removeChild(WVJBIframe);
    }, 0);
  } else if (window.WebViewJavascriptBridge) {
    callback(window.WebViewJavascriptBridge);
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady',
      () => {
        callback(window.WebViewJavascriptBridge);
      },
      false
    );
  }
  return false;
}

export function appBridge(api, params, callback) {
  let printParams;
  try {
    printParams = JSON.stringify(params);
  } catch (e) {
    printParams = '';
  }
  console.log(
    '------>>> appBridge: ',
    'web -> native;',
    `api: ${api};`,
    `params: ${JSON.stringify(printParams)};`,
    `callback: ${callback}.`
  ); // eslint-disable-line
  setupWebViewJavascriptBridge(bridge => {
    if (!isInited && !isIOS()) {
      bridge.init();
    }

    isInited = true;

    bridge.callHandler(api, params, callback);
  });
}

export function appBridgeRegister(api, callback) {
  console.log(
    '<<<------ appBridgeRegister: ',
    'native -> web;',
    `api: ${api};`,
    `callback: ${callback}.`
  ); // eslint-disable-line
  setupWebViewJavascriptBridge(bridge => {
    if (!isInited && !isIOS()) {
      bridge.init();
    }

    isInited = true;

    bridge.registerHandler(api, (data, responseCallback) => {
      if (callback) {
        callback(data, responseCallback);
      }
    });
  });
}

bridge-opt.js文件

/**
 * Internal dependencies
 */
import {  appBridge, appBridgeRegister } from './app-bridge';
// toast
export function toast(msg) {
  appBridge('toast', msg);
}
// 通知 Native 加载失败
export function loadingFail(msg) {
  appBridge('loadingFail', msg);
}

// 获取用户的登陆状态
export function checkLoginState() {
  return new Promise(resolve => {
    appBridge('checkLoginState', null, res => {
      if (!isIOS()) {
        try {
          res = JSON.parse(res);
        } catch (e) {
          res = {};
        }
      }
      resolve(res);
    });
  });
}

// 获取用户的登陆状态-用于底部定制导航页中
export function checkLoginStateInTab() {
  return new Promise(resolve => {
    appBridge('react', { action: 'checkLoginState' }, res => {
      if (!isIOS()) {
        try {
          res = JSON.parse(res);
        } catch (e) {
          res = {};
        }
      }
      resolve(res);
    });
  });
}
//登录
export function loginReact() {
  return new Promise(resolve => {
    appBridge('react', { action: 'login' }, res => {
      if (!isIOS()) {
        try {
          res = JSON.parse(res);
        } catch (e) {
          res = {};
        }
      }
      resolve(res);
    });
  });
}

使用：

import {
  loginReact, // 登录
} from 'libs/bridge/bridge-opt';

loginReact()
.then(res => {
  if (res.isLogin) {
    window.open('/annual-report');
  }
})
.catch(() => {
  this.setState({ loading: false });
});