TouchableOpacity覆盖PanResponder

Question

我有一个连接到TouchableOpacity的PanResponder (它已经包含了一个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

尝试将panResponder附加到的TouchableOpacity包装在Animated.View中

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