React Native点击Map Marker时如何显示Overlay组件

问题出在Marker的onPress事件绑定逻辑上，当前写法仅返回了toggleOverlay函数但未实际执行，导致点击Marker时不会触发状态更新，Overlay自然无法显示。

修正方案 #

将Marker的onPress修改为以下两种正确写法之一：

写法1：直接绑定函数引用 #

<Marker
  coordinate={{
    longitude: parseFloat(point.PointLongitude),
    latitude: parseFloat(point.PointLatitude)                
  }}
  title={point.name}
  pinColor={'blue'}
  onPress={toggleOverlay}
>                
</Marker>

写法2：箭头函数内调用函数 #

<Marker
  coordinate={{
    longitude: parseFloat(point.PointLongitude),
    latitude: parseFloat(point.PointLatitude)                
  }}
  title={point.name}
  pinColor={'blue'}
  onPress={() => toggleOverlay()}
>                
</Marker>

原因说明 #

按钮的onPress={toggleOverlay}是直接绑定函数引用，点击时会自动执行该函数；而你原本Marker的() => (toggleOverlay)只是返回函数本身，没有触发执行，导致visible状态无变化，Overlay无法显示。修正后点击Marker会正常调用toggleOverlay，切换visible状态以显示Overlay组件。

内容的提问来源于stack exchange，提问作者ab_404