添加地图事件示例

example/src/app.js

@@ -11,6 +11,7 @@ import Marker from './examples/marker'
 import Polyline from './examples/polyline'
 import Polygon from './examples/polygon'
 import Circle from './examples/circle'
+import Events from './examples/events'
 
 export default StackNavigator({
   Examples: {screen: Examples},
@@ -24,6 +25,7 @@ export default StackNavigator({
   Polyline: {screen: Polyline},
   Polygon: {screen: Polygon},
   Circle: {screen: Circle},
+  Events: {screen: Events},
 }, {
   navigationOptions: {
     headerTintColor: '#212121',

example/src/examples.js

@@ -43,6 +43,8 @@ export default class Examples extends Component {
         {this._renderItem('手势交互', 'Gestures')}
         <View style={styles.separator}/>
         {this._renderItem('动画移动', 'Animated')}
+        <View style={styles.separator}/>
+        {this._renderItem('地图事件', 'Events')}
       </View>
       <View style={styles.group}>
         {this._renderItem('添加标记', 'Marker')}

example/src/examples/events.js

+import React, {Component} from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+} from 'react-native'
+import MapView from 'react-native-amap3d'
+
+export default class Events extends Component {
+  static navigationOptions = {
+    title: '地图事件',
+  }
+
+  state = {
+    logs: [],
+  }
+
+  _log(event, data) {
+    this.setState({
+      logs: [
+        {
+          key: Math.random(),
+          time: new Date().toLocaleString(),
+          event: event,
+          data: JSON.stringify(data, null, 2),
+        },
+        ...this.state.logs,
+      ],
+    })
+  }
+
+  render() {
+    return <View style={styles.body}>
+      <MapView
+        locationEnabled
+        onPress={({nativeEvent}) => this._log('onPress', nativeEvent)}
+        onLongPress={({nativeEvent}) => this._log('onLongPress', nativeEvent)}
+        onLocation={({nativeEvent}) => this._log('onLocation', nativeEvent)}
+        style={styles.body}/>
+      <ScrollView contentContainerStyle={styles.log}>
+        {this.state.logs.map(item =>
+          <Text key={item.key} style={styles.logText}>
+            {item.time} {item.event}: {item.data}
+          </Text>
+        )}
+      </ScrollView>
+    </View>
+  }
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  log: {
+    padding: 10,
+  },
+  logText: {
+    marginBottom: 5,
+  },
+})