onPress 无法使用 react-native-svg 在 iOS 上处理 SVG 路径答案

【问题标题】：onPress is not working on the SVG Path on iOS using react-native-svgonPress 无法使用 react-native-svg 在 iOS 上处理 SVG 路径
【发布时间】：2020-05-10 10:15:23
【问题描述】：

当我在如下所示的弧线上按任意位置时，在 Android 上，onPress 始终会正确调用，但在 iOS 上，有时会调用 onPress，但有时不会。弧线的某些部分在 iOS 上是不可点击的。

此外，没有任何定位元素（绝对/相对定位）与圆弧重叠。

这是我的代码。

<Svg
   height={deviceHeight - 200}
   width={deviceWidth}
>
    <Path
       ref={ref => this.pathRef = ref}
       fill="none"
       stroke='rgba(214,51,51,.2)'
       strokeWidth={35}
       onPress={() => console.log('path on pressed called!')}
       d="M 392.72727272727275 124.90909090909088 A 360 450 0 0 0 42.72727272727275 574.9090909090909"
    />
</Svg>

我还在 react-native-svg 包中记录了一个问题：https://github.com/react-native-community/react-native-svg/issues/1256

【问题讨论】：

标签： react-native svg react-native-ios react-native-svg

【解决方案1】：

在 react-native-svg 中，您可以使用“符号”组件，它将所有元素组合成一个元素，然后将 onPress() 添加到该符号。它将适用于所有绝对/相对内容。

<Svg height="150" width="110">
  <Symbol id="symbol" viewBox="0 0 150 110" width="100" height="50">
    //------------------------------
    // Your content for that arc
    //------------------------------
  </Symbol>
</Svg>

【讨论】：

为了对 SVG 元素进行分组，我宁愿使用“G”元素：github.com/react-native-community/react-native-svg#g。并且使用符号，它仍然不起作用。不过谢谢你的建议。

【解决方案2】：

不确定这是否适用于仍在寻找的人，但我遇到了同样的问题，这对我来说是一种解决方法。我将svg 包裹在来自react-native-gesture-handler 的TouchableOpacity 中。

import { TouchableOpacity } from 'react-native-gesture-handler';

<TouchableOpacity activeOpacity={1} onPress={onPress}>
  <Svg>
    {/* more stuff here */}
  </Svg>
</TouchableOpacity>

【讨论】：