之前的一篇文章react-native 百度地圖—Android拓展(計(jì)算兩點(diǎn)之間距離)介紹過Android端怎么寫漆腌，本來想著另開一篇文章把ios也寫了槐沼，后來項(xiàng)目上一堆事情就給忘了，今天把ios端的補(bǔ)一下~
通過之前Android端的介紹憨降，我們知道react-native-baidu-map是將原生封裝后父虑，供react native調(diào)用该酗。那同樣的授药，我們先要了解怎么封裝原生模塊，推薦一篇文章：【React Native開發(fā)】React Native進(jìn)階之原生模塊封裝基礎(chǔ)篇詳解-適配iOS開發(fā)(59)
下面我們開始ios端呜魄，我們還是在BaiduMapDemo中進(jìn)行修改悔叽。
一、新建GetDistanceModule.h
在React Native中爵嗅，原生模塊就是一個(gè)Objective-C類娇澎，該類實(shí)現(xiàn)了RCTBridgeModule協(xié)議。
// GetDistanceModule.h
// RCTBaiduMap
//
// Created by sybil052 on 2017/5/5.
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface GetDistanceModule : NSObject<RCTBridgeModule>
@end
二睹晒、新建GetDistanceModule.m
為了實(shí)現(xiàn)RCTBridgeModule協(xié)議,你的GetDistanceModule.m文件需要實(shí)現(xiàn)RCT_EXPORT_MODULE()趟庄，用來設(shè)置指定在JavaScript端進(jìn)行訪問該模塊的名稱。
RCT_EXPORT_MODULE(BaiduGetDistanceModule);
使用RCT_EXPORT_METHOD()來聲明提供給JavaScript調(diào)用的方法伪很，不然這些方法JavaScript前端是無法進(jìn)行調(diào)用的戚啥。有時(shí)我們需要傳遞一個(gè)返回值給JavaScript，可以通過回調(diào)或者發(fā)送事件解決锉试。在傳遞返回值時(shí)猫十，不能直接通過橋接進(jìn)行傳遞JavaScript的距離對象的，所以我們這邊需要把距離轉(zhuǎn)換成一個(gè)字符串或者數(shù)字進(jìn)行傳遞呆盖。
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的時(shí)候我們已經(jīng)新建過了应又，所以這次直接用就好了~
四宙项、導(dǎo)出GetDistance.js
在寫Android的時(shí)候我們已經(jīng)導(dǎo)出過了，所以這次直接用就好了~
五株扛、在項(xiàng)目中調(diào)用
使用方法在寫Android的時(shí)候也寫過了尤筐，so~ 直接運(yùn)行！就不上效果圖了~
到這里席里，我們的react native百度地圖（iOS）拓展叔磷，就完成了。
