优化 MapView 封装

example/src/controls.js

 import React, {Component} from 'react'
 import {StyleSheet, View, Text, Switch} from 'react-native'
-import AMapView from 'react-native-amap3d'
+import MapView from 'react-native-amap3d'
 
 export default class Controls extends Component {
   static navigationOptions = {
@@ -42,7 +42,7 @@ export default class Controls extends Component {
             value={this.state.showsZoomControls}/>
         </View>
       </View>
-      <AMapView
+      <MapView
         showsUserLocation={true}
         showsCompass={this.state.showsCompass}
         showsScale={this.state.showsScale}

example/src/gestures.js

 import React, {Component} from 'react'
 import {StyleSheet, View, Text, Switch} from 'react-native'
-import AMapView from 'react-native-amap3d'
+import MapView from 'react-native-amap3d'
 
 export default class Gestures extends Component {
   static navigationOptions = {
@@ -42,7 +42,7 @@ export default class Gestures extends Component {
             value={this.state.tiltEnabled}/>
         </View>
       </View>
-      <AMapView
+      <MapView
         zoomEnabled={this.state.zoomEnabled}
         scrollEnabled={this.state.scrollEnabled}
         rotateEnabled={this.state.rotateEnabled}

example/src/indoor.js

 import React, {Component} from 'react'
-import {StyleSheet, View, Text, Switch} from 'react-native'
-import AMapView from 'react-native-amap3d'
+import {StyleSheet} from 'react-native'
+import MapView from 'react-native-amap3d'
 
 export default class Indoor extends Component {
   static navigationOptions = {
@@ -8,7 +8,7 @@ export default class Indoor extends Component {
   }
 
   render() {
-    return <AMapView
+    return <MapView
       showsIndoorMap={true}
       showsIndoorSwitch={true}
       style={StyleSheet.absoluteFill}/>

example/src/layers.js

 import React, {Component} from 'react'
 import {StyleSheet, View, Text, Switch} from 'react-native'
-import AMapView from 'react-native-amap3d'
+import MapView from 'react-native-amap3d'
 
 export default class Layers extends Component {
   static navigationOptions = {
@@ -35,7 +35,7 @@ export default class Layers extends Component {
             value={this.state.showsMapText}/>
         </View>
       </View>
-      <AMapView
+      <MapView
         zoomLevel={17}
         showsMapText={this.state.showsMapText}
         showsTraffic={this.state.showsTraffic}

example/src/map-types.js

 import React, {Component} from 'react'
 import {StyleSheet, Picker} from 'react-native'
-import AMapView from 'react-native-amap3d'
+import MapView from 'react-native-amap3d'
 
 export default class MapTypes extends Component {
   static navigationOptions = ({navigation}) => {
@@ -21,7 +21,7 @@ export default class MapTypes extends Component {
   }
 
   render() {
-    return <AMapView
+    return <MapView
       mapType={this.props.navigation.state.params.mapType}
       style={StyleSheet.absoluteFill}/>
   }

index.js

-import {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import {requireNativeComponent, View} from 'react-native'
 
-export default requireNativeComponent('AMapView', {
-  name: 'AMapView',
-  propTypes: {
+class MapView extends Component {
+  static propTypes = {
     ...View.propTypes,
     showsUserLocation: PropTypes.bool,
     showsIndoorMap: PropTypes.bool,
@@ -24,6 +23,14 @@ export default requireNativeComponent('AMapView', {
     scrollEnabled: PropTypes.bool,
     rotateEnabled: PropTypes.bool,
     tiltEnabled: PropTypes.bool,
-  },
-})
+  }
 
+  render() {
+    return <AMapView {...this.props}/>
+  }
+}
+
+AMapView = requireNativeComponent('AMapView', MapView)
+
+export default MapView
+export {MapView}