在使用react-native-svg的iOS上，onPress不能在SVG路径上工作

Question

在安卓系统中，当我按下弧线上的任意位置时，onPress总是被正确调用，但在iOS上，onPress有时会被调用，但有时却不会被调用。

此外，没有任何定位元素(绝对/相对定位)与弧线重叠。

这是我的代码。

<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

Answer 1

在react-native-svg中，您可以使用" symbol“组件，它会将所有元素组合到一个元素中，然后将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>

Answer 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>