4

当我在如下所示的弧线上按任意位置时，在 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

4

2 回答 2

0

在 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>
于 2020-02-13T10:32:39.567 回答
0

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

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

<TouchableOpacity activeOpacity={1} onPress={onPress}>
  <Svg>
    {/* more stuff here */}
  </Svg>
</TouchableOpacity>
于 2021-09-22T22:53:25.600 回答