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 の配列が必要なことは理解していますが、実際にそれを行うにはどうすればよいでしょうか?
どうもありがとう