前一阵子从网上找了一个百度地图的第三方库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
最近在网上其他网站看见有人转载我的文章，我非常高兴，说明我的文章对大家还是有所帮助的，但我有一点小小请求，希望大家在转载时能注明文章出处~谢谢啦！！！
网友评论