H5调用Android和ios原生方法(react)

混合开发中需要web需要和原生交互方式。

1、H5调用原生方法的方式

原生需要写方法来让H5调用，H5在window中获取方法。
ios壳中方法全部放在webkit.messageHandlers对象中，前端调用只需要

/**
* funcName 为原生方法名 
* postMessage(null) 跨源传递数据，没有数据，一定要写null 
*/
webkit.messageHandlers.funcName.postMessage(null)

Android中调用方法，直接在window中调用安卓给的对象

/**
* android 为原生对象名
* add为android对象中的方法 
*/
const { android } = window;
android.add('')

2、原生给H5传值

H5调用原生方法后，原生怎么回调给H5?
跟原生一样，H5需要写好方法，让原生调用，这里调用就是原生直接调用了H5的方法，当然这个方法是要全局的方法，在window对象中的。
在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：

componentDidMount() {
  // funcitonName 是原生回调使用的方法名
  window['funcitonName'] = this.funcitonName;
  ...
}
/**
* 原生调用后， H5做的事情...
* 注意， 如果这里用了this， 那么一定要注意这里的this，可能不是你想要的this
*/
funcitonName = (args) => {
  ... // something
}

3、H5判断当前系统

function getNavigatorOS() {
    const u = navigator.userAgent;
    // const app = navigator.appVersion; // 系统版本
    const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // android终端或者uc浏览器   
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端 
    if (isAndroid) {
        ... // something
    } else if (isiOS) {
        ... // something
    }
}

4、统一封装方法，让页面调用原生方法更容易，更好维护

原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。应该在一个文件中统一处理，其他页面只需要调用处理好的方法就好。
例如获取当前设备号，原生封装好方法后，统一在一个文件中处理：

// deviceId 为安卓给的获取设备号方法对象
const { webkit, deviceId } = window;

// 判断设备系统
const appOS = getNavigatorOS(); 

/**
 * 获取 设备ID，返回对应的方法
 */
export function getDeviceId(){
    if(appOS === 1){
        return deviceId.deviceId()
    }else if(appOS === 2){
        return webkit.messageHandlers.deviceId.postMessage(null)
    }
}

这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号，才不管你是哪个系统呢。