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

【问题标题】：How can I make a SVG element clickable on React?如何使 SVG 元素在 React 上可点击？
【发布时间】：2019-07-09 00:47:10
【问题描述】：

我在 Expo 中使用 React Native，我有 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/

我还创建了一个 Snack，但我认为它根本不起作用 -> https://snack.expo.io/@maketroli/expo.svg-example?session_id=snack-session-_9YKofW2Y

我看到的是，如果我点击其中一个元素，点击就会卡在那里，因为如果我点击一个新元素，它会抛出最后一个点击元素的功能。我必须点击新元素大约 3 次才能将点击集中在该元素上。

我看到了一些关于 PanResponder 的东西，但我不知道这与它有什么关系。

【问题讨论】：

你试过onClick={...}而不是onPress
嗨@Mulli，它是 React Native。所以onPress 是要走的路。
RN中没有onClick事件..
是的。刚注意到。请看facebook.github.io/react-native/docs/handling-touches我在那里看到了一些简单的例子......
Expo 处理 WebViews，因为帖子有 reactjs 标签，所以不那么明显。

标签： javascript reactjs react-native svg ecmascript-6

【解决方案1】：

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

import { TouchableOpacity } from "react-native"

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

您需要适当地设置它的样式。

【讨论】：

如果我这样做，Expo 客户端会关闭，SVG 也会消失。
我用TouchableWithoutFeedback 包装了组件，SVG 在那里，但它具有相同的行为。
使用TouchableOpacity，将整个块包装到一个视图中。
我认为这与您提到的无关。我已经尝试了很多方法，但我无法让它发挥作用。