有没有办法在 react-native-maps 屏幕 position 上获取标记？

Question

我需要具有覆盖 map 的半透明背景的自定义工具提示。

所以一般我们先画MapView。 在 MapView 顶部按下标记后，我们绘制叠加层（backgroundColor：“#00000033”），在其顶部绘制工具提示和图像在标记 position 上以模拟突出显示。 现在我需要在屏幕上获得绝对 position 的标记以在其上绘制我的图像。 onPress nativeEvent 中有关于文档的point prop，但我在真实事件中没有，我不知道这是否是我需要的。

{
   "action": "marker-press",
   "coordinate": {
      "latitude": -15.3469687,
      "longitude": 37.100195
   },
   "id": "unknown",
   "target": 295
}

有没有办法在屏幕 position 上获取标记？

Answer 1

是的，您可以在自定义组件的 ref 上使用measureInWindow方法。 如果您的自定义组件没有此方法可用，您可以将其包装在一个视图中，然后在其上使用该方法。

例子：

const markerRef = useRef();
const [markerPosition, setMarkerPosition] = useState({});

const measureMarker = () => {
  markerRef.current?.measureInWindow((x, y, width, height) => {
    const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');
    // if any non-zero, on-screen values, save measurements
    if (!(x || y || width || height)) return;
    if (x > screenWidth || y > screenHeight) return;
    setMarkerPosition({x, y, width, height});
  }
};

...

return (
  <View ref={markerRef} onLayout={measureMarker}>
    <CustomMarker
      ...
);

有关更多信息，请参阅measureInWindow的文档。 measure也可以用于获取屏幕上的 position。

请注意，在本机布局完成之前，这些回调不会起作用。