Question

我将React Native与Expo一起使用，并且我有4个SVG元素，需要它们可单击。这是每个代码的代码：

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

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

I recorded a video with the behavior

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

有什么想法吗？

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

我还创建了零食，但我看不到它有任何作用-> https://snack.expo.io/@maketroli/expo.svg-example?session_id=snack-session-_9YKofW2Y

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

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

Answer 1

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

import { TouchableOpacity } from "react-native"

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

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

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

1 个答案: