TouchableOpacity覆盖PanResponder

Question

I have a PanResponder attached to a TouchableOpacity (that already includes an onPress function).

This is my 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})
          });
      }
  },
});

This is my 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>

When I click on the TouchableOpacity, it works correctly, but I'm not able to drag it as it should according to its PanResponder, but it did work when I had it attached to an Animated.View. Any way I can fix this? I could not find a working solution to this anywhere. Thanks!

Answer 1

Try wrapping the TouchableOpacity in Animated.View to which you attach the 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>