在地图视图标记内显示一个按钮？

Question

我目前正在使用airbnb 地图模块开发一个反应本机应用程序。

我的地图包含多个标记，我可以单击这些标记来打开组件MapView。它包含标题和描述。

我想为此添加一个按钮MapView，但是我发现的解决方案不起作用。我这样定制它（这是return我的谷歌地图组件的一部分：

return(
  <View style={styles.container}>

    <MapView
      style={styles.map}
      provider={PROVIDER_GOOGLE}
      customMapStyle={mapStyle}
      initialRegion={{
        latitude: 48.852968,
        longitude: 2.349902,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1
      }}
    >
      <MapView.Marker
        coordinate={{
          latitude: 48.852968,
          longitude: 2.349902
        }}
          title={ 'myTitle' }
          description={ 'myDescription' }
          pinColor={ 'blue' }
          onCalloutPress={() => alert('Clicked')}
      >
        <MapView.Callout>
          <View>
            <Text>Click Me!</Text>
          </View>
        </MapView.Callout>
      </MapView.Marker>

    </MapView>

  </View>
);

我想要的： 1- 在地图上显示我的蓝色标记（使用纬度和经度） 2- 单击标记 3- 有一个带有标题、描述和“单击我！”的小弹出窗口 按钮 4-“点击”为console.log

相反会发生什么： 1- 在地图上显示我的蓝色标记（使用纬度和经度） 2- 单击标记 3- 出现一个小弹出窗口“单击我！” 按钮（更多的是蓝色链接，但我不知道它应该如何呈现）4-我的控制台中没有“单击”

此功能已被弃用吗？或者我做错了什么？我遵循了解决方案和文档，但也许我错过了一些东西。

Answer 1

从按钮中删除 onPress 并将其添加到标记（参见 pincolor 之后），尝试再次单击该按钮。

<MapView.Marker
    coordinate={{
        latitude: myLat,
        longitude: myLng
    }}
    title={ 'myTitle' }
    description={ 'myDescription' }
    pinColor={ 'blue' }
    onCalloutPress={() => alert('Clicked')}
>
    <MapView.Callout>
        <View>
            <Text>Click Me!</Text>
        </View>
    </MapView.Callout>
</MapView.Marker>

这对我有用。希望这也能帮助你:)