添加基本示例

example/app.js

-import React, {Component} from 'react'
-import {Text} from 'react-native'
-import AMapView from 'react-native-amap3d'
-
-export default class Example extends Component {
-  render() {
-    return <AMapView style={{flex: 1}}/>
-  }
-}

example/index.android.js

-import React, {Component} from 'react'
 import {AppRegistry} from 'react-native'
-import App from './app'
+import App from './src/app'
 AppRegistry.registerComponent('Example', () => App)

example/index.ios.js

-import React, {Component} from 'react'
 import {AppRegistry} from 'react-native'
-import App from './app'
+import App from './src/app'
 AppRegistry.registerComponent('Example', () => App)

example/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "react": "16.0.0-alpha.6",
     "react-native": "0.44.0",
-    "react-native-amap3d": ".."
+    "react-native-amap3d": "..",
+    "react-navigation": "^1.0.0-beta.11"
   },
   "devDependencies": {
     "babel-jest": "20.0.3",

example/src/app.js

+import {StackNavigator} from 'react-navigation'
+import Examples from './examples'
+import MapTypes from './map-types'
+import Layers from './layers'
+import Indoor from './indoor'
+import Controls from './controls'
+import Gestures from './gestures'
+
+export default StackNavigator({
+  Examples: {screen: Examples},
+  MapTypes: {screen: MapTypes},
+  Layers: {screen: Layers},
+  Indoor: {screen: Indoor},
+  Controls: {screen: Controls},
+  Gestures: {screen: Gestures},
+})

example/src/controls.js

+import React, {Component} from 'react'
+import {StyleSheet, View, Text, Switch} from 'react-native'
+import AMapView from 'react-native-amap3d'
+
+export default class Controls extends Component {
+  static navigationOptions = {
+    title: '地图控件',
+  }
+
+  state = {
+    showsCompass: false,
+    showsScale: false,
+    showsZoomControls: true,
+    showsMyLocationButton: false,
+  }
+
+  render() {
+    return <View style={StyleSheet.absoluteFill}>
+      <View style={styles.controls}>
+        <View style={styles.control}>
+          <Text>指南针</Text>
+          <Switch
+            onValueChange={showsCompass => this.setState({showsCompass})}
+            value={this.state.showsCompass}/>
+        </View>
+        <View style={styles.control}>
+          <Text>比例尺</Text>
+          <Switch
+            onValueChange={showsScale => this.setState({showsScale})}
+            value={this.state.showsScale}/>
+        </View>
+        <View style={styles.control}>
+          <Text>定位</Text>
+          <Switch
+            onValueChange={showsMyLocationButton => this.setState({showsMyLocationButton})}
+            value={this.state.showsMyLocationButton}/>
+        </View>
+        <View style={styles.control}>
+          <Text>缩放</Text>
+          <Switch
+            onValueChange={showsZoomControls => this.setState({showsZoomControls})}
+            value={this.state.showsZoomControls}/>
+        </View>
+      </View>
+      <AMapView
+        showsUserLocation={true}
+        showsCompass={this.state.showsCompass}
+        showsScale={this.state.showsScale}
+        showsMyLocationButton={this.state.showsMyLocationButton}
+        showsZoomControls={this.state.showsZoomControls}
+        style={styles.map}/>
+    </View>
+  }
+}
+
+const styles = StyleSheet.create({
+  map: {
+    flex: 1,
+  },
+  controls: {
+    height: 54,
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    elevation: 4,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  control: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})

example/src/examples.js

+import React, {Component} from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  TouchableHighlight,
+} from 'react-native'
+
+export default class Examples extends Component {
+  static navigationOptions = {
+    title: 'AMap3D Examples',
+  }
+
+  _renderItem(title, route) {
+    return <TouchableHighlight onPress={() => this.props.navigation.navigate(route)}>
+      <View style={styles.item}>
+        <Text style={styles.itemText}>{title}</Text>
+      </View>
+    </TouchableHighlight>
+  }
+
+  render() {
+    return <ScrollView>
+      {this._renderItem('地图模式', 'MapTypes')}
+      {this._renderItem('图层功能', 'Layers')}
+      {this._renderItem('室内地图', 'Indoor')}
+      {this._renderItem('地图控件', 'Controls')}
+      {this._renderItem('手势交互', 'Gestures')}
+    </ScrollView>
+  }
+}
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 15,
+    backgroundColor: '#fff',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ddd',
+  },
+  itemText: {
+    fontSize: 16,
+    color: '#000',
+  },
+})

example/src/gestures.js

+import React, {Component} from 'react'
+import {StyleSheet, View, Text, Switch} from 'react-native'
+import AMapView from 'react-native-amap3d'
+
+export default class Gestures extends Component {
+  static navigationOptions = {
+    title: '手势交互',
+  }
+
+  state = {
+    zoomEnabled: true,
+    scrollEnabled: true,
+    rotateEnabled: true,
+    tiltEnabled: true,
+  }
+
+  render() {
+    return <View style={StyleSheet.absoluteFill}>
+      <View style={styles.controls}>
+        <View style={styles.control}>
+          <Text>旋转</Text>
+          <Switch
+            onValueChange={rotateEnabled => this.setState({rotateEnabled})}
+            value={this.state.rotateEnabled}/>
+        </View>
+        <View style={styles.control}>
+          <Text>滑动</Text>
+          <Switch
+            onValueChange={scrollEnabled => this.setState({scrollEnabled})}
+            value={this.state.scrollEnabled}/>
+        </View>
+        <View style={styles.control}>
+          <Text>缩放</Text>
+          <Switch
+            onValueChange={zoomEnabled => this.setState({zoomEnabled})}
+            value={this.state.zoomEnabled}/>
+        </View>
+        <View style={styles.control}>
+          <Text>倾斜</Text>
+          <Switch
+            onValueChange={tiltEnabled => this.setState({tiltEnabled})}
+            value={this.state.tiltEnabled}/>
+        </View>
+      </View>
+      <AMapView
+        zoomEnabled={this.state.zoomEnabled}
+        scrollEnabled={this.state.scrollEnabled}
+        rotateEnabled={this.state.rotateEnabled}
+        tiltEnabled={this.state.tiltEnabled}
+        style={styles.map}/>
+    </View>
+  }
+}
+
+const styles = StyleSheet.create({
+  map: {
+    flex: 1,
+  },
+  controls: {
+    height: 54,
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    elevation: 4,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  control: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})

example/src/indoor.js

+import React, {Component} from 'react'
+import {StyleSheet, View, Text, Switch} from 'react-native'
+import AMapView from 'react-native-amap3d'
+
+export default class Indoor extends Component {
+  static navigationOptions = {
+    title: '室内地图',
+  }
+
+  render() {
+    return <AMapView
+      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'
+
+export default class Layers extends Component {
+  static navigationOptions = {
+    title: '图层的显示',
+  }
+
+  state = {
+    showsMapText: true,
+    showsTraffic: false,
+    showsBuildings: false,
+  }
+
+  render() {
+    return <View style={StyleSheet.absoluteFill}>
+      <View style={styles.controls}>
+        <View style={styles.control}>
+          <Text>建筑</Text>
+          <Switch
+            onValueChange={showsBuildings => this.setState({showsBuildings})}
+            value={this.state.showsBuildings}/>
+        </View>
+        <View style={styles.control}>
+          <Text>交通</Text>
+          <Switch
+            onValueChange={showsTraffic => this.setState({showsTraffic})}
+            value={this.state.showsTraffic}/>
+        </View>
+        <View style={styles.control}>
+          <Text>文本</Text>
+          <Switch
+            onValueChange={showsMapText => this.setState({showsMapText})}
+            value={this.state.showsMapText}/>
+        </View>
+      </View>
+      <AMapView
+        zoomLevel={17}
+        showsMapText={this.state.showsMapText}
+        showsTraffic={this.state.showsTraffic}
+        showsBuildings={this.state.showsBuildings}
+        style={styles.map}/>
+    </View>
+  }
+}
+
+const styles = StyleSheet.create({
+  map: {
+    flex: 1,
+  },
+  controls: {
+    height: 54,
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    elevation: 4,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  control: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})

example/src/map-types.js

+import React, {Component} from 'react'
+import {StyleSheet, Picker} from 'react-native'
+import AMapView from 'react-native-amap3d'
+
+export default class MapTypes extends Component {
+  static navigationOptions = ({navigation}) => {
+    const {state, setParams} = navigation
+    state.params = state.params || {mapType: 'standard'}
+    return {
+      title: '地图模式',
+      headerRight: <Picker
+        style={{width: 100}}
+        selectedValue={state.params.mapType}
+        onValueChange={mapType => setParams({mapType})}>
+        <Picker.Item label='标准' value='standard'/>
+        <Picker.Item label='卫星' value='satellite'/>
+        <Picker.Item label='导航' value='navigation'/>
+        <Picker.Item label='夜间' value='night'/>
+      </Picker>,
+    }
+  }
+
+  render() {
+    return <AMapView
+      mapType={this.props.navigation.state.params.mapType}
+      style={StyleSheet.absoluteFill}/>
+  }
+}

package.json

@@ -17,6 +17,7 @@
     "react-native": ">=0.40"
   },
   "devDependencies": {
-    "react-native": "^0.44.0"
+    "react": "16.0.0-alpha.6",
+    "react-native": "0.44.0"
   }
 }