react-native百度地图—ios拓展(计算两点之间距离)

之前的一篇文章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）拓展，就完成了。