在开发React Native的App的时候，你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的，有的是第三方试图组件，总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制，你可以非常简单的用来包装已有的原生视图。
http://www.cnblogs.com/sunshine-anycall/p/6472029.html
代码地址：https://github.com/future-challenger/react-native-gaode-map
下面就用高德地图作为例子讲解如何包装原生视图。高德地图本身不仅有视图需要展示，还有一些和React Native交互的部分。比如给Js代码发送事件，接受Js发送的方法调用等。
简单实现
基本山只需要三步就可以达到目的：
创建RCTViewManager的子类
在源文件里添加RCT_EXPORT_MODULE()宏的调用
实现- (UIView *)view方法
看看代码：
//.h#import#import@interfaceGDMapViewManager:RCTViewManager@end//.m#import"GDMapViewManager.h"#import"GDMapView.h"#import#import@implementationGDMapViewManagerRCT_EXPORT_MODULE()- (UIView*)view { MAMapView *mapView = [[MAMapView alloc] init]; mapView.showsUserLocation =YES;// 显示用户位置蓝点mapView.userTrackingMode = MAUserTrackingModeFollow;returnmapView;}@end// index.ios.js// import from `react` & `react native`...import { requireNativeComponent } from'react-native'constGDMapView = requireNativeComponent('GDMapView', null)
exportdefaultclass mobike extends Component {
render() {return(
);
}
}// styles...
属性
要导出属性：
RCT_EXPORT_VIEW_PROPERTY(showsCompass,BOOL)
这里导出的属性是高德地图的内置属性，表示是否在地图上显示指南针。可以如此使用：
如果是我们自定义的属性，而不是高德地图内置的属性该如何导出呢？来看一个例子：
RCT_CUSTOM_VIEW_PROPERTY(center,CLLocationCoordinate2D,GDMapView){[viewsetCenterCoordinate:json?[RCTConvert CLLocationCoordinate2D:json]:defaultView.centerCoordinate];}
写这个属性是因为出过来的参数是json串，只有最初是的类型NSString、int之类的可用，其他类型的都需要转化。比如这里要用的CLLocationCoordinate2D这个类型。所以我们需要判断js传过来的json是否为空，并在不为空的时候转化成CLLocationCoordinate2D对象。如果js传过来的json为空的话则使用defaultView.centerCoordinate来填充。
处理用户发出的事件
处理直接或者间接的从用户发出的事件。比如，用户对地图的各种操作都会生成对应的事件需要原生代码来处理。
要实现这部分功能基本只需要两步：
在视图部分添加一个属性：@property (nonatomic, copy) RCTBubblingEventBlock onChange;
在视图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组件。
importReactfrom'react';import{requireNativeComponent}from'react-native';exportdefaultclassMapViewextendsReact.Component{constructor(props){super(props)}render(){return()}}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,};varGDMapView = requireNativeComponent('GDMapView', MapView);
之后就可以这样使用了：
注意，给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的一部分。如：
constGDMapView=requireNativeComponent('GDMapView',MapView,{nativeOnly:{onChange:true}});
在对应的组件里处理事件
在本组件内绑定原生组件的onChange事件，如这里的_onChange()方法。
在绑定好的方法里（如_onChange()方法内）调用外部传入的事件处理方法（如this.props.onRegionChange）
当然，你不会忘了给this.props.onRegionChange写PropTypes的。
exportdefaultclassMapViewextendsReact.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()}}MapView.propTypes = {//...onRegionChange: React.PropTypes.func,};constGDMapView = requireNativeComponent('GDMapView', MapView, {nativeOnly: { onChange:true}});
填坑完毕
到这里你可以在React Natie里愉快的使用原生组件了。
后面我们来探讨一下在Android里如何处理这些问题。
网友评论