react-native - FlatList 中的 React Native 滑动项与 TouchableOpacity 的 onPress 冲突

Question

我使用 PanGestureHandler 在我的 FlatList 中创建了一个可滑动的行并重新设置了 2。但是，当您按下该行时，我的滑动与 TouchableWithoutFeedback/TouchableOpacity 发生冲突。在滑动发生时是否有禁用 onPress 的方法？我尝试通过使用 runOnJS(onStart)() 来这样做，它禁用了父组件中的 TouchableOpacity，但没有成功。我认为这是因为如果 onPress 在被禁用之前已注册，它仍然会在发布时触发。

const Swipeable = props => {
  const { onSwipe, children, onStart, onEnd } = props
  const translateX = useSharedValue(0)
  const scaledButtonX = useSharedValue(scale(50))
  const translateXButton = useDerivedValue(() => {
    return translateX.value + scaledButtonX.value
  })
  const offsetX = useSharedValue(0);
  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.x = translateX.value
      runOnJS(onStart)() // this disables the onPress in the parent component
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.x + clamp(event.translationX, -9999, -ctx.x)
    },
    onEnd: (event, ctx) => {
      const to = snapPoint(translateX.value, event.velocityX, snapPoints)
      translateX.value = withTiming(to, {
        easing: Easing.linear,
        duration: 200
      })
      ctx.x = translateX.value
      runOnJS(onEnd)() // this enables it back
    }
  })

  const style = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
    }
  })

  const buttonStyle = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      flexDirection: "row",
      justifyContent: "flex-end",
      alignItems: "center",
      overflow: "hidden",
      transform: [{ translateX: translateXButton.value }]
    }
  })

  const onDelete = () => {
    translateX.value = withSequence(withTiming(-(width + scale(50))), withTiming(0, {
      duration: 500
    }, () => console.log('done2')))
    // translateX.value = withTiming(0, {}, () => console.log('done'))
    onSwipe()
  }

  return (
    <View style={{ position: 'relative' }}>
      <Animated.View style={buttonStyle}>
        <TouchableOpacity style={styles.deleteButtonContainer} onPress={onDelete}>
          <View style={styles.deleteButton}>
            <Icon name='x' size={scale(20)} color={Colors.darkPurple} />
          </View>
        </TouchableOpacity>
      </Animated.View>
      <PanGestureHandler failOffsetY={[-5, 5]} activeOffsetX={[-5, 5]} onGestureEvent={onGestureEvent}>
        <Animated.View style={style}>
          {children}
        </Animated.View>
      </PanGestureHandler>
    </View>
  )
}

标签： react-nativereact-native-reanimatedreact-native-gesture-handlerreact-native-reanimated-v2