react-native 百度地图—Android拓展(计算两点

前一阵子从网上找了一个百度地图的第三方库react-native-baidu-map应用在公司项目中，但是发现不能完全满足项目要求，从网上找了很久也没有发现更合适的，所以只能自己动手修改此库了。

在这里，要非常感谢react-native-baidu-map的作者lovebing！

今天先介绍下Android的修改，ios的会在之后介绍。
打开react-native-baidu-map源码，发现就是将原生的代码进行封装，搞成react native可以调用的，这样就有头绪了~首先我们先要了解怎么封装原生模块，我推荐一篇文章：React Native进阶之原生模块封装基础篇1-适配Android开发(51)，感觉写的不错~
下面我们开始重点啦，我们还是在BaiduMapDemo中进行修改。

一、新建GetDistanceModule.java

首先我们需要创建一个原生模块类，该原生模块类是继承ReactContextBaseJavaModule类的Java代码，该用来实现JavaScript所需的一些功能。
react-native-baidu-map中的BaseModule继承了ReactContextBaseJavaModule，因此我们的新建的GetDistanceModule只需继承BaseModule就可以了。
在项目中找到node_modules/react-native-baidu-map/android/src/main/java/org/lovebing/reactnative/baidumap/,在该目录下新建GetDistanceModule.java文件
代码如下：

package org.lovebing.reactnative.baidumap;

import android.util.Log;
import android.widget.Toast;

import com.baidu.mapapi.model.LatLng;
import com.baidu.mapapi.utils.DistanceUtil;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
/**
 * Created by sybil052 on 5/3/2017.
 */
public class GetDistanceModule extends BaseModule{

    public GetDistanceModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }
    /**
     * getName()方法用于返回一个字符串信息，用来代表JavaScript前端使用这个模块
     * 这边我们返回信息为"BaiduGetDistanceModule"用来代表给模块,这样我们在前端就可以用JavaScript通过React.NativeModules. BaiduGetDistanceModule访问到这个模块了
     */
    public String getName() {
        return "BaiduGetDistanceModule";
    }
    /**
     * @ReactMethod注解，用于给JavaScript进行调用
     * 该桥接方法的返回类型必须要为void。
     * React Native中的桥接通信是异步形式的，如果需要返回值给JavaScript必须需要通过回调方法或者事件发送
     */
    @ReactMethod
    public void getLocationDistance(double lat1, double lng1, double lat2, double lng2) {
        WritableMap params = Arguments.createMap();
        LatLng p1 = new LatLng(lat1, lng1);
        LatLng p2 = new LatLng(lat2, lng2);
        //计算p1、p2两点之间的直线距离，单位：米
        double distance = DistanceUtil.getDistance(p1, p2);

        //Toast.makeText(getReactApplicationContext(), "distance="+distance, 1).show();

        params.putDouble("distance",  distance);
        sendEvent("getDistanceResult", params);
    }
}

二、模块注册

其次需要自定义一个实现ReactPackage的类，同时需要实现这里边的三个方法。最重要的是在createNativeModule方法中添加刚刚那个模块。如果没有注册，那么当前模块在JavaScript中无法被访问到。
react-native-baidu-map中已经有实现ReactPackage的类，所以我们不用新建，找到BaiduMapPackage.java，在createNativeModules()方法中添加新建的Module，代码如下：

@Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new BaiduMapModule(reactContext),
                new GeolocationModule(reactContext),
                new GetDistanceModule(reactContext)
        );
    }

接下来，上面自定义的packager需要在MainApplication.java中的getPackagers方法中进行添加，找到BaiduMapDemo/android/app/src/main/java/com/baidumapdemo/MainApplication.java，在文件中添加代码：

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new BaiduMapPackage(getApplicationContext())
      );
    }

三、新建GetDistance.js

在上述两步完成后，我们需要在JavaScript里调用封装的方法，
在项目中找到node_modules/react-native-baidu-map/js，在该目录下新建GetDistance.js，代码如下：

/**
 * Created by sybil052 on 2017/5/3.
 */

import React, {
    Component,
    PropTypes
} from 'react';
import {
    requireNativeComponent,
    Platform,
    DeviceEventEmitter
} from 'react-native';

import { NativeModules } from 'react-native';

const _module = NativeModules.BaiduGetDistanceModule;

export default {
    getLocationDistance(lat1, lng1, lat2, lng2){
        return new Promise((resolve, reject) => {
            try {
                alert(_module);
                _module.getLocationDistance(lat1, lng1, lat2, lng2);
            }
            catch (e) {
                reject(e);
                return;
            }
            DeviceEventEmitter.once('getDistanceResult', resp => {
                resp.distance = parseFloat(resp.distance);
                resolve(resp);
            });
        });
    },
}

四、导出GetDistance.js

在项目中找到node_modules/react-native-baidu-map/index.js文件，将写好的GetDistance.js导出，代码如下：

import _GetDistance from './js/GetDistance';

export const GetDistance = _GetDistance;

五、在项目中调用

打开项目中的BaiduMapDemo.js文件，找到Satellite按钮，修改onPress方法，代码如下：

import { GetDistance } from 'react-native-baidu-map';

<Button style={styles.btn} title="Satellite" onPress={() => {
     GetDistance.getLocationDistance(39.915, 116.404,38.915, 117.404)
             .then((data) => {
                   alert('distance:'+JSON.stringify(data));
                   console.log(data);
             }).catch(e =>{
                   console.warn(e, 'error');
      })
}} />

到这里，我们的react native百度地图（Android）拓展，就完成了。上张效果图~

Sybil052.baidumapdemo.png

最近在网上其他网站看见有人转载我的文章，我非常高兴，说明我的文章对大家还是有所帮助的，但我有一点小小请求，希望大家在转载时能注明文章出处~谢谢啦！！！