Question

https://facebook.github.io/react-native/docs/mapview.html

我正在寻找一个关于如何按地图来创建该位置注释的示例。

我知道如何添加注释，但不知道如何获取我刚按下的位置的坐标。

Answer 1

我无法在react-native integer文档或代码中看到onPress事件的任何内容 - 但是在github上找到了这个：https://github.com/lelandrichardson/react-native-maps - 看起来很不错并且有{ {1}}返回坐标（https://github.com/lelandrichardson/react-native-maps#mapview-events）

的事件

希望这有帮助！

Answer 2

查看Gesture Responder System文档。

最简单的方法是将某些内容包装到例如<TouchableOpacity />中，然后您可以抓取onPress事件处理程序中的坐标：

<TouchableOpacity onPress={(event) => console.log(event.nativeEvent.locationX)}>
  {/* ... */}
</TouchableOpacity>

上面的文档中对所有内容都进行了很好的解释，因为更高级的手势处理可以查看PanResponder。

Answer 3

我在onPress上使用MapView方法，如下所示：

class DefaultMarkers extends React.Component {

     constructor(props) {
         super(props);
         this.state = {
            markers: [],
         };
     }

     onMapPress(e) {
         this.setState({
            markers: [
                ...this.state.markers,
                {
                   coordinate: e.nativeEvent.coordinate,
                   key: id++,
                },
             ],
          }
       );
     }

     render() {
         return (
            <View style={styles.container}>
                <MapView
                   style={styles.map}
                   onPress={e => this.onMapPress(e)}
                >
                   {this.state.markers.map(marker => (
                       <Marker
                          key={marker.key}
                          coordinate={marker.coordinate}
                       />
                   ))}
                </MapView>
            </View>
        );
    }
}

在full example上查看react-native-maps github的完整示例

如何在React Native MapView按下的位置放置一个引脚？

3 个答案: