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

2019-11-07 22:47:56

字體：大中小

供稿：網(wǎng)友

在開發(fā)React Native的App的時(shí)候，你會(huì)遇到很多情況是原生的視圖組件已經(jīng)開發(fā)好了的。有的是系統(tǒng)的SDK提供的，有的是第三方試圖組件，總之你的APP可以直接使用的原生視圖是很多的。React Native提供了一套完善的機(jī)制，你可以非常簡(jiǎn)單的用來(lái)包裝已有的原生視圖。

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

下面就用高德地圖作為例子講解如何包裝原生視圖。高德地圖本身不僅有視圖需要展示，還有一些和React Native交互的部分。比如給Js代碼發(fā)送事件，接受Js發(fā)送的方法調(diào)用等。

簡(jiǎn)單實(shí)現(xiàn)

基本山只需要三步就可以達(dá)到目的： 1. 創(chuàng)建RCTViewManager的子類 2. 在源文件里添加RCT_EXPORT_MODULE()宏的調(diào)用 3. 實(shí)現(xiàn)- (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 GDMapViewManagerRCT_EXPORT_MODULE()- (UIView *)view { MAMapView *mapView = [[MAMapView alloc] init]; mapView.showsUserLocation = YES; // 顯示用戶位置藍(lán)點(diǎn) 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...

屬性

要導(dǎo)出屬性：

RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)

這里導(dǎo)出的屬性是高德地圖的內(nèi)置屬性，表示是否在地圖上顯示指南針。可以如此使用：

如果是我們自定義的屬性，而不是高德地圖內(nèi)置的屬性該如何導(dǎo)出呢？來(lái)看一個(gè)例子：

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

寫這個(gè)屬性是因?yàn)槌鲞^(guò)來(lái)的參數(shù)是json串，只有最初是的類型NSString、int之類的可用，其他類型的都需要轉(zhuǎn)化。比如這里要用的CLLocationCoordinate2D這個(gè)類型。所以我們需要判斷js傳過(guò)來(lái)的json是否為空，并在不為空的時(shí)候轉(zhuǎn)化成CLLocationCoordinate2D對(duì)象。如果js傳過(guò)來(lái)的json為空的話則使用defaultView.centerCoordinate來(lái)填充。

處理用戶發(fā)出的事件

處理直接或者間接的從用戶發(fā)出的事件。比如，用戶對(duì)地圖的各種操作都會(huì)生成對(duì)應(yīng)的事件需要原生代碼來(lái)處理。

要實(shí)現(xiàn)這部分功能基本只需要兩步： 1. 在視圖部分添加一個(gè)屬性：@property (nonatomic, copy) RCTBubblingEventBlock onChange; 2. 在視圖Manager部分暴露出這個(gè)屬性：RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

之后在相對(duì)應(yīng)的地方調(diào)用就可以了，如：

- (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), } });}

建立對(duì)應(yīng)的Js組件

上文的方式使用原生組件會(huì)顯得凌亂，不易控制。最好的方式就是建立一個(gè)對(duì)應(yīng)的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);

之后就可以這樣使用了：

注意，給Js組件定義PropTypes是必須的。而且我這里的定義還是有點(diǎn)模糊。官網(wǎng)的比較細(xì)致，列在這里：

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, }),};

官網(wǎng)的例子對(duì)region這prop定義的相當(dāng)?shù)募?xì)致，不是一個(gè)`React.PropTypes.object就過(guò)去了的。

還有一些屬性，你不想它們作為對(duì)應(yīng)Js組件的API的一部分。所以，需要隱藏起來(lái)。那么你可以在綁定原生組件和Js組件的時(shí)候指定它們不作為API的一部分。如：

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

在對(duì)應(yīng)的組件里處理事件

在本組件內(nèi)綁定原生組件的onChange事件，如這里的_onChange()方法。在綁定好的方法里（如_onChange()方法內(nèi)）調(diào)用外部傳入的事件處理方法（如this.props.onRegionChange）

當(dāng)然，你不會(huì)忘了給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 }});