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

字数 508阅读 247

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

推荐阅读更多精彩内容