Question

我有一个PanResponder附加到TouchableOpacity（已经包含一个onPress函数）。

这是我的PanResponder：

this.panResponder = PanResponder.create({
  onMoveShouldSetPanResponder : () => true,
  onPanResponderGrant : (e, gesture) => {
      this.setState({zIndex: 20});
      Animated.spring(this.state.size, {
          toValue: 200,
          friction: 5
      }).start();
  },
  onPanResponderMove           : Animated.event([null,{
      dx : this.state.pan.x,
      dy : this.state.pan.y
  }]),
  onPanResponderRelease        : (e, gesture) => {
      console.log("pan responder release");
  },
  onPanResponderTerminate : (e, gesture) => {
      if(this.state.pan.y._value > 150) {
          Animated.timing(this.state.pan, {
              toValue: { x: 100, y: 200 }
          }).start();
          Animated.timing(this.state.size_1, {
              toValue: 0
          }).start( () => {
              Animated.timing(this.state.size, {
                  toValue: 0,
                  friction: 5
              }).start();
          });
      } else {
          Animated.timing(this.state.size, {
              toValue: 0,
              friction: 5
          }).start();
          Animated.spring(this.state.pan, {
              toValue: { x: 0, y: 0 },
              friction: 5
          }).start(() => {
              this.setState({zIndex: 2})
          });
      }
  },
});

这是我的TouchableOpacity：

<TouchableOpacity {...this.panResponder.panHandlers} onPress={() => this.refs.modal.open()} style={{position:'absolute', left:10}}>
    <Image
        style={{width: 200, height: 200, borderRadius: 100}}
        source={{uri: 'image url here'}} />
</TouchableOpacity>

当我点击TouchableOpacity时，它可以正常工作，但我无法根据它的PanResponder拖动它，但是当它连接到Animated.View时它确实有效。我能解决这个问题吗？我无法在任何地方找到合适的解决方案。谢谢！

Answer 1

尝试将TouchableOpacity Animated.View中的panResponder包裹起来<Animated.View {...this.panResponder.panHandlers} style={/*style*/}> <TouchableOpacity onPress={() => this.refs.modal.open()}> <Image style={{width: 200, height: 200, borderRadius: 100}} source={{uri: 'image url here'}} /> </TouchableOpacity> </Animated.View>：

plot

TouchableOpacity会覆盖PanResponder

1 个答案: