如何在React上使SVG元素可点击？

Question

我在Expo中使用React Native，我有4个SVG元素，需要它们可单击。 这是每个代码的代码：

  <Svg.G
    id="Passangers-Going-B"
    onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}
   >
...

使用该代码，我可以单击SVG元素，但是奇怪的是，当我尝试单击另一个元素时，单击仍然触发我单击的最后一个元素的事件。

我录制了带有该行为的视频

那么，有没有更好的方法可以做到这一点？ 我只需要单击这些SVG元素即可更改为新路线。

有任何想法吗？

我正在使用来自博览会的SVG。 import { Svg } from 'expo'; -> https://docs.expo.io/versions/latest/sdk/svg/

我还创建了一个Snack，但我根本看不到它可以正常工作-> https://snack.expo.io/@maketroli/expo.svg-example?session_id=snack-session-_9YKofW2Y

我看到的是，如果我单击其中一个元素，则单击会卡在此处，因为如果我单击一个新元素，它将引发最后单击的元素的功能。 我必须单击新元素的3倍左右才能将点击集中在该元素上。

我看到了有关PanResponder的信息，但我不知道这与它有关。

Answer 1

您应该将SVG包装到仅用于处理Press事件的Component中。

import { TouchableOpacity } from "react-native"

<TouchableOpacity onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}>
    <Svg.G
        id="Passangers-Going-B"
    />
</TouchableOpacity>

您将需要适当地设置样式。