[英]React-Native panResponder array with functional component
I have a slider with 6 images and I want to be able to move each one of them using panResponder.我有一个带有 6 张图像的 slider,我希望能够使用 panResponder 移动每一张图像。
I wrote this code (which works, but it moves all the slider, not just one image)我写了这段代码(有效,但它移动了所有 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 >
);
}
I want to be able to drag every image, not the whole slider. Is it possible?我希望能够拖动每张图像,而不是整个 slider。这可能吗? I understand we need an array of panResponders, but how to actually do it?
我知道我们需要一组 panResponders,但实际上该怎么做呢?
Many thanks非常感谢
what you have to do for.你必须做什么。 everyone.
每个人。 image transform it into a single component, and to each of them add a panResponder, if you do it with only one, it takes the entire current component to raise the event
image 将其转换为单个组件,并为每个组件添加一个 panResponder,如果只使用一个,则需要整个当前组件来引发事件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.