react-native-svg onPress 事件不起作用

Posted 2023-04-18

【中文标题】react-native-svg onPress 事件不起作用

【英文标题】：react-native-svg onPress event not working

【发布时间】：2019-05-14 01:21:30

【问题描述】：

我正在使用 react-native-svg，因为文档中说可以在 svg 元素上触发 onPress 事件，但它不起作用。

<Svg width=370 height=180 ...props viewBox="0 0 385 185" >
   <Path
      d="M5.607 13.536l9.267 9.267a2.5 2.5 0 0 1-3.535 3.536L.732 15.732a2.497 2.497 0 0 1-.695-2.196 2.497 2.497 0 0 1 .695-2.197L11.34.732a2.5 2.5 0 0 1 3.535 3.536l-9.267 9.268z"
      fill="white"
      onPress=() => alert('Press on Circle')
    />
</Svg>

然后我尝试了文档中写的示例：

<Svg
            
            
        >
    <Circle
    cx="50%"
    cy="50%"
    r="38%"
    fill="red"
    onPress=() => alert('Press on Circle')
/>
  </Svg>

但作为第一个它不起作用

【问题讨论】：

您在调试器控制台中遇到的错误或警告是什么？

我没有得到任何评论，它只是不响应触摸

试试import Alert from 'react-native' 和Alert.alert('Press on Circle')

没有变化

【参考方案1】：

问题是由 panResponder 引起的，因为它的优先级高于按钮，因此解决方案是不要从 onMoveShouldSetPanResponderCapture 始终返回 true。 例如：

componentWillMount() 
        this.panResponder = PanResponder.create(
            onMoveShouldSetPanResponderCapture: this.onShouldDrag,
            onPanResponderMove: Animated.event(
            [null,  dx: this.state.pan.x ]
            ),
            onPanResponderRelease: this.onReleaseItem,
            onPanResponderTerminate: this.onReleaseItem,
        );
    

    onShouldDrag = (e, gesture) => 
        const  dx  = gesture;
        return Math.abs(dx) > 2;
    

【讨论】：

如果我没有 panResponder onMoveShouldSetPanResponderCapture 怎么办？我认为您没有很好地解释解决方案。