Question

当一个视图覆盖另一个视图时，TouchableOpacity无法很好地响应。

当我按View时，它应该发出警报消息。但是它不能很好地响应，有时它不会警告消息。

此演示程序在模拟器中效果很好，只是在设备中效果不佳。

Here is the full code : https://github.com/kk412027247/swipe_multiple_card

需要帮助，非常感谢。

export default class Card extends React.Component{
    translateX = new Animated.Value(0);
    _panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => Platform.OS === 'ios' ? 
        this.props.zIndex ===3 : this.props.zIndex === 1,
        onMoveShouldSetPanResponderCapture: () => Platform.OS === 'ios' ? 
        this.props.zIndex ===3 : this.props.zIndex === 1,
        onPanResponderMove: Animated.event([null,{dx: this.translateX}]),
        onPanResponderRelease: (e, {vx, dx}) => {
            const screenWidth = Dimensions.get("window").width;
            if (vx >= 0.5 || dx >= 0.5 * screenWidth) {
                this.props.forward();
                Animated.timing(this.translateX, {
                    toValue: 0,
                    duration: 200
                }).start();
            } else if(vx <= -0.5 || dx <= -0.5 * screenWidth){
                this.props.backward();
                Animated.timing(this.translateX, {
                    toValue: 0,
                    duration: 200
                }).start();
            } else {
                Animated.spring(this.translateX, {
                    toValue: 0,
                    bounciness: 10
                }).start();
            }
        }
    });


render(){
const {title,content, top, left, zIndex, elevation, backgroundColor,scale} = this.props;
const _style = [
  styles.container, {
    top,
    left,
    zIndex,
    elevation,
    backgroundColor,
    transform:[
      // {scale:scale},
      {translateX: this.translateX}
    ]
  }
];
return(

    <Animated.View
      style={_style}
      {...this._panResponder.panHandlers}
    >
      <TouchableOpacity
        style={styles.button}
        onPress={alert.bind(null, title)}
      >
        <Text style={styles.title}>{title}</Text>
        <Text>{content}</Text>
      </TouchableOpacity>

    </Animated.View>


    )
  }
}

Answer 1

最后我自己找到答案。 Because PanResponder capture the event, button can not respond the touch event. 要解决此问题，如果手指移动不大，温可以忽略它。例如，如果手指移动少于5px，我们可以忽略该动作。现在，按钮将响应触摸事件。

onMoveShouldSetPanResponder:(evt, gestureState) => {
    const { moveX, moveY, dx, dy } = gestureState
    if( dx > 5 || dy > 5) {
        return true
    }else {
        return false
    }

}

现在按钮将响应触摸事件。

我从here找到了答案。

反应本机触摸功能无法很好地响应

1 个答案: