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