0

6 つの画像を含むスライダーがあり、panResponder を使用してそれぞれを移動できるようにしたいと考えています。

私はこのコードを書きました(これは機能しますが、1つの画像だけでなく、すべてのスライダーを移動します)

    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 >
  );
}

スライダー全体ではなく、すべての画像をドラッグできるようにしたい。出来ますか?panResponders の配列が必要なことは理解していますが、実際にそれを行うにはどうすればよいでしょうか?

どうもありがとう

4

0 に答える 0