React Native填坑之旅 -- 使用iOS原生视图（高德地图）

在开发React Native的App的时候，你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的，有的是第三方试图组件，总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制，你可以非常简单的用来包装已有的原生视图。

代码地址：https://github.com/future-challenger/react-native-gaode-map

下面就用高德地图作为例子讲解如何包装原生视图。高德地图本身不仅有视图需要展示，还有一些和React Native交互的部分。比如给Js代码发送事件，接受Js发送的方法调用等。

简单实现

基本山只需要三步就可以达到目的：
1. 创建RCTViewManager的子类
2. 在源文件里添加RCT_EXPORT_MODULE()宏的调用
3. 实现- (UIView *)view方法

看看代码：

//.h
#import <Foundation/Foundation.h>
#import <React/RCTViewManager.h>

@interface GDMapViewManager : RCTViewManager

@end

//.m
#import "GDMapViewManager.h"
#import "GDMapView.h"
#import <MAMapKit/MAMapKit.h>
#import <AMapFoundationKit/AMapFoundationKit.h>

@implementation GDMapViewManager

RCT_EXPORT_MODULE()

- (UIView *)view {
  MAMapView *mapView = [[MAMapView alloc] init];
  mapView.showsUserLocation = YES;  // 显示用户位置蓝点
  mapView.userTrackingMode = MAUserTrackingModeFollow;

  return mapView;
}

@end

// index.ios.js
// import from `react` & `react native`...