React-Native 具有功能组件的 panResponder 阵列

Question

我有一个带有 6 张图像的 slider，我希望能够使用 panResponder 移动每一张图像。

我写了这段代码（有效，但它移动了所有 slider，而不仅仅是一张图片）

    const pan = useState(new Animated.ValueXY())[0];

  const panResponder = useState(
    PanResponder.create({
      onMoveShouldSetResponderCapture: () => true, //Tell iOS that we are allowing the movement
      onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
      onMoveShouldSetPanResponder: () => true,


      onPanResponderGrant: (e, gestureState) => {
        pan.setOffset({
          y: pan.y._value
        });
      },
  onPanResponderMove: Animated.event(
    [
      null,
      { dy: pan.y }
    ],
    {
      useNativeDriver: false,
      listener: (evt, gestureState) => {

      }
    }
  ),
  onPanResponderRelease: (evt, gestureState) => {
    //pan.flattenOffset();

    console.log(gestureState);

    if (gestureState.moveY > 710) {

      Alert.alert("Added to cart.");
    }
    else {
      Animated.spring(pan, {
        toValue: 100,
        useNativeDriver: false
      },
      ).start();
    }
  }
})
)[0];


return (
<View style={styles.container}>
  <View style={{ width, height: '100%' }}>
    <ScrollView
      horizontal
      style={{ width }}
      showsHorizontalScrollIndicator={false}
    >
      {
        products.map((product) => (
          <Animated.View key={product.id}
            style={{
              transform: [{ translateY: pan.y }]
            }}
            {...panResponder.panHandlers}
          >
            <Image
              style={{ width: width / 3, height, flex: 1 }}
              resizeMode="contain"
              source={{
                uri: product.product_image,
              }}
            />
          </Animated.View>

        ))

      }

    </ScrollView>
  </View>
  <View style={styles.cart}>
    <Text style={styles.cartText}>Here comes the cart</Text>
  </View>
</View >
  );
}

我希望能够拖动每张图像，而不是整个 slider。这可能吗？ 我知道我们需要一组 panResponders，但实际上该怎么做呢？

非常感谢

Answer 1

你必须做什么。 每个人。 image 将其转换为单个组件，并为每个组件添加一个 panResponder，如果只使用一个，则需要整个当前组件来引发事件