在開發(fā)React Native的App的時候，你會遇到很多情況是原生的視圖組件已經(jīng)開發(fā)好了的。有的是系統(tǒng)的SDK提供的，有的是第三方試圖組件，總之你的APP可以直接使用的原生視圖是很多的。React Native提供了一套完善的機(jī)制，你可以非常簡單的用來包裝已有的原生視圖。
代碼地址：https://github.com/future-challenger/react-native-gaode-map
下面就用高德地圖作為例子講解如何包裝原生視圖。高德地圖本身不僅有視圖需要展示，還有一些和React Native交互的部分。比如給Js代碼發(fā)送事件，接受Js發(fā)送的方法調(diào)用等。
簡單實(shí)現(xiàn)
基本山只需要三步就可以達(dá)到目的：
- 創(chuàng)建
RCTViewManager的子類 - 在源文件里添加
RCT_EXPORT_MODULE()宏的調(diào)用 - 實(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 GDMapViewManager
RCT_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)置屬性，表示是否在地圖上顯示指南針?？梢匀绱耸褂茫?/p>
<GDMapView style={{ flex: 1, }} showsCompass={true} />
如果是我們自定義的屬性，而不是高德地圖內(nèi)置的屬性該如何導(dǎo)出呢？來看一個例子：
RCT_CUSTOM_VIEW_PROPERTY(center, CLLocationCoordinate2D, GDMapView) {
[view setCenterCoordinate:json ? [RCTConvert CLLocationCoordinate2D:json] : defaultView.centerCoordinate];
}
寫這個屬性是因?yàn)槌鲞^來的參數(shù)是json串，只有最初是的類型NSString、int之類的可用，其他類型的都需要轉(zhuǎn)化。比如這里要用的CLLocationCoordinate2D這個類型。所以我們需要判斷js傳過來的json是否為空，并在不為空的時候轉(zhuǎn)化成CLLocationCoordinate2D對象。如果js傳過來的json為空的話則使用defaultView.centerCoordinate來填充。
處理用戶發(fā)出的事件
處理直接或者間接的從用戶發(fā)出的事件。比如，用戶對地圖的各種操作都會生成對應(yīng)的事件需要原生代碼來處理。
要實(shí)現(xiàn)這部分功能基本只需要兩步：
- 在視圖部分添加一個屬性：
@property (nonatomic, copy) RCTBubblingEventBlock onChange; - 在視圖Manager部分暴露出這個屬性：
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
之后在相對應(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),
}
});
}
建立對應(yīng)的Js組件
上文的方式使用原生組件會顯得凌亂，不易控制。最好的方式就是建立一個對應(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);
之后就可以這樣使用了：
<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是必須的。而且我這里的定義還是有點(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)的例子對region這prop定義的相當(dāng)?shù)募?xì)致，不是一個`React.PropTypes.object就過去了的。
還有一些屬性，你不想它們作為對應(yīng)Js組件的API的一部分。所以，需要隱藏起來。那么你可以在綁定原生組件和Js組件的時候指定它們不作為API的一部分。如：
const GDMapView = requireNativeComponent('GDMapView', MapView, {
nativeOnly: { onChange: true }
});
在對應(yīng)的組件里處理事件
- 在本組件內(nèi)綁定原生組件的
onChange事件，如這里的_onChange()方法。 - 在綁定好的方法里（如
_onChange()方法內(nèi)）調(diào)用外部傳入的事件處理方法（如this.props.onRegionChange）
當(dāng)然，你不會忘了給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里如何處理這些問題。
