在開發React Native的App的時候，你會遇到很多情況是原生的檢視元件已經開發好了的。有的是系統的SDK提供的，有的是第三方試圖元件，總之你的APP可以直接使用的原生檢視是很多的。React Native提供了一套完善的機制，你可以非常簡單的用來包裝已有的原生檢視。

下面就用高德地圖作為例子講解如何包裝原生檢視。高德地圖本身不僅有檢視需要展示，還有一些和React Native互動的部分。比如給Js程式碼傳送事件，接受Js傳送的方法呼叫等。

簡單實現

基本山只需要三步就可以達到目的：
1. 建立RCTViewManager的子類
2. 在原始檔裡新增RCT_EXPORT_MODULE()

看看程式碼：

//.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`...

import
 
 { requireNativeComponent } from 'react-native'

const GDMapView = requireNativeComponent('GDMapView', null)

export default class mobike extends Component {
  render() {
    return (
      <View style={styles.container}>
        <GDMapView style={{ flex: 1, }} />
      </View>
    );
  }
}

// styles...

屬性

要匯出屬性：

RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)

這裡匯出的屬性是高德地圖的內建屬性，表示是否在地圖上顯示指南針。可以如此使用：

<GDMapView style={{ flex: 1, }} showsCompass={true} />

如果是我們自定義的屬性，而不是高德地圖內建的屬性該如何匯出呢？來看一個例子：

RCT_CUSTOM_VIEW_PROPERTY(center, CLLocationCoordinate2D, GDMapView) {
  [view setCenterCoordinate:json ? [RCTConvert CLLocationCoordinate2D:json] : defaultView.centerCoordinate];
}

寫這個屬性是因為出過來的引數是json串，只有最初是的型別NSString、int之類的可用，其他型別的都需要轉化。比如這裡要用的CLLocationCoordinate2D這個型別。所以我們需要判斷js傳過來的json是否為空，並在不為空的時候轉化成CLLocationCoordinate2D物件。如果js傳過來的json為空的話則使用defaultView.centerCoordinate來填充。

處理使用者發出的事件

處理直接或者間接的從使用者發出的事件。比如，使用者對地圖的各種操作都會生成對應的事件需要原生程式碼來處理。

要實現這部分功能基本只需要兩步：
1. 在檢視部分新增一個屬性：@property (nonatomic, copy) RCTBubblingEventBlock onChange;
2. 在檢視Manager部分暴露出這個屬性：RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

之後在相對應的地方呼叫就可以了，如：

- (void)mapView:(GDMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
  if (!mapView.onChange) {
    return;
  }

  MACoordinateRegion region = mapView.region;
  mapView.onChange(@{
    @"region": @{
      @"latitude": @(region.center.latitude),
      @"longitude": @(region.center.longitude),
      @"latitudeDelta": @(region.span.latitudeDelta),
      @"longitudeDelta": @(region.span.longitudeDelta),
    }
  });
}

建立對應的Js元件

上文的方式使用原生元件會顯得凌亂，不易控制。最好的方式就是建立一個對應的Js元件。

import React from 'react';
import {
requireNativeComponent
} from 'react-native';

export default class MapView extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <GDMapView {...this.props} />
    )
  }
}

MapView.propTypes = {
  marker: React.PropTypes.object,
  markers: React.PropTypes.array,
  zoom: React.PropTypes.number,
  centerCoordinate: React.PropTypes.object,
  showScale: React.PropTypes.bool,
  showsCompass: React.PropTypes.bool,
};

var GDMapView = requireNativeComponent('GDMapView', MapView);

之後就可以這樣使用了：

<MapView
    style={{ flex: 1, marginTop: 20, }}
    marker={marker} showsCompass={false}
    markers={markers}
    zoom={10}
    centerCoordinate={{ latitude: 39.909520, longitude: 116.336170 }}
    showScale={false} />

注意，給Js元件定義PropTypes是必須的。而且我這裡的定義還是有點模糊。官網的比較細緻，列在這裡：

MapView.propTypes = {
  region: React.PropTypes.shape({
    /**
     * Coordinates for the center of the map.
     */
    latitude: React.PropTypes.number.isRequired,
    longitude: React.PropTypes.number.isRequired,

    /**
     * Distance between the minimum and the maximum latitude/longitude
     * to be displayed.
     */
    latitudeDelta: React.PropTypes.number.isRequired,
    longitudeDelta: React.PropTypes.number.isRequired,
  }),
};

官網的例子對region這prop定義的相當的細緻，不是一個`React.PropTypes.object就過去了的。

還有一些屬性，你不想它們作為對應Js元件的API的一部分。所以，需要隱藏起來。那麼你可以在繫結原生元件和Js元件的時候指定它們不作為API的一部分。如：

const GDMapView = requireNativeComponent('GDMapView', MapView, {
  nativeOnly: { onChange: true }
});

在對應的元件裡處理事件

1. 在本元件內繫結原生元件的onChange事件，如這裡的_onChange()方法。
2. 在繫結好的方法裡（如_onChange()方法內）呼叫外部傳入的事件處理方法（如this.props.onRegionChange）

當然，你不會忘了給this.props.onRegionChange寫PropTypes的。

export default class MapView extends React.Component {
  constructor(props) {
    super(props)

    this._onChange = this._onChange.bind(this);
  }

  _onChange(event) {
    if(!this.props.onRegionChange) {
      return;
    }

    this.props.onRegionChange(event.NativeEvent.region)
  }

  render() {
    return (
      <GDMapView {...this.props} onChange={this._onChange} />
    )
  }
}

MapView.propTypes = {
  //...
  onRegionChange: React.PropTypes.func,
};

const GDMapView = requireNativeComponent('GDMapView', MapView, {
  nativeOnly: { onChange: true }
});

填坑完畢

到這裡你可以在React Natie裡愉快的使用原生元件了。

後面我們來探討一下在Android裡如何處理這些問題。