之前的一篇文章react-native 百度地图—Android拓展(计算两点之间距离)介绍过Android端怎么写，本来想着另开一篇文章把ios也写了，后来项目上一堆事情就给忘了，今天把ios端的补一下~
通过之前Android端的介绍，我们知道react-native-baidu-map是将原生封装后，供react native调用。那同样的，我们先要了解怎么封装原生模块，推荐一篇文章：【React Native开发】React Native进阶之原生模块封装基础篇详解-适配iOS开发(59)
下面我们开始ios端，我们还是在BaiduMapDemo中进行修改。
一、新建GetDistanceModule.h
在React Native中，原生模块就是一个Objective-C类，该类实现了RCTBridgeModule协议。
// GetDistanceModule.h
// RCTBaiduMap
//
// Created by sybil052 on 2017/5/5.
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface GetDistanceModule : NSObject<RCTBridgeModule>
@end
二、新建GetDistanceModule.m
为了实现RCTBridgeModule协议,你的GetDistanceModule.m文件需要实现RCT_EXPORT_MODULE()，用来设置指定在JavaScript端进行访问该模块的名称。
RCT_EXPORT_MODULE(BaiduGetDistanceModule);
使用RCT_EXPORT_METHOD()来声明提供给JavaScript调用的方法，不然这些方法JavaScript前端是无法进行调用的。有时我们需要传递一个返回值给JavaScript，可以通过回调或者发送事件解决。在传递返回值时，不能直接通过桥接进行传递JavaScript的距离对象的，所以我们这边需要把距离转换成一个字符串或者数字进行传递。
RCT_EXPORT_METHOD(getDistance:(double)lat1 lng1:(double)lng1 lat2:(double)lat2 lng2:(double)lng2 ){
...
[self.bridge.eventDispatcher sendAppEventWithName:@"getDistanceResult" body:@{@"distance":[NSString stringWithFormat:@"%f",distance]}];
}
好了，上完整代码：
// GetDistanceModule.m
// RCTBaiduMap
//
// Created by sybil052 on 2017/5/5.
#import "GetDistanceModule.h"
#import <UIKit/UIKit.h>
#import <BaiduMapAPI_Utils/BMKGeometry.h>
#import "RCTEventDispatcher.h"
@implementation GetDistanceModule
@synthesize bridge = _bridge;
RCT_EXPORT_MODULE(BaiduGetDistanceModule);
RCT_EXPORT_METHOD(getDistance:(double)lat1 lng1:(double)lng1 lat2:(double)lat2 lng2:(double)lng2 ){
BMKMapPoint point1 = BMKMapPointForCoordinate(CLLocationCoordinate2DMake(lat1,lng1));
BMKMapPoint point2 = BMKMapPointForCoordinate(CLLocationCoordinate2DMake(lat2,lng2));
CLLocationDistance distance = BMKMetersBetweenMapPoints(point1,point2);
[self.bridge.eventDispatcher sendAppEventWithName:@"getDistanceResult" body:@{@"distance":[NSString stringWithFormat:@"%f",distance]}];
}
@end
三、新建GetDistance.js
在写Android的时候我们已经新建过了，所以这次直接用就好了~
四、导出GetDistance.js
在写Android的时候我们已经导出过了，所以这次直接用就好了~
五、在项目中调用
使用方法在写Android的时候也写过了，so~ 直接运行！就不上效果图了~
到这里，我们的react native百度地图（iOS）拓展，就完成了。
