AnimatedView无法与TouchOpacity一起使用

Question

我有以下代码：

<Animated.View
            key={item[keyProp]}
            style={[this.getCardStyle(), styles.cardStyle, { zIndex: 99 }]}
            {...this._panResponder.panHandlers}
          >
            {renderCard(item)}
          </Animated.View>

添加TouchOpacity时，我的滑动手势会停止工作：

 <Animated.View
            key={item[keyProp]}
            style={[this.getCardStyle(), styles.cardStyle, { zIndex: 99 }]}
            {...this._panResponder.panHandlers}
          >
            <TouchableOpacity onPress={() => Actions.businessSingle({ job })} activeOpacity={1}>
              {renderCard(item)}
            </TouchableOpacity>
          </Animated.View>

平移：

this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (evt, gesture) => {
        this.position.setValue({ x: gesture.dx, y: gesture.dy });
      },
      onPanResponderRelease: (evt, gesture) => {
        if (gesture.dx > SWIPE_THRESHOLD) {
          this.forceSwipe('right');
        } else if (gesture.dx < -SWIPE_THRESHOLD) {
          this.forceSwipe('left');
        } else {
          this.resetPosition();
        }
      },
    });

卡片样式：

getCardStyle() {
    const { position } = this;
    const rotate = position.x.interpolate({
      inputRange: [-SCREEN_WIDTH * 1.5, 0, SCREEN_WIDTH * 1.5],
      outputRange: ['-120deg', '0deg', '120deg'],
    });

    return {
      ...position.getLayout(),
      transform: [{ rotate }],
    };
  }

任何想法，为什么TouchOpacity会覆盖我的所有样式和手势，并且有可能对其进行修复？