在我的应用程序中,我使用 ScrollView
来显示图像。在我的 ScrollView
组件下方,我有两个按钮,例如 prev
和 next
。我想用按钮添加自定义分页。我的图像也来自循环中的数组。我想一次显示 4 张图像。因此,next
按钮应该显示接下来的 4 张图片(如果有的话),prev
按钮应该显示前 4 张图片(如果有的话)。我的 ScrollView
目前是这样的:
<View>
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
</View>
在此下方我有两个按钮。我为它们创建了两个不同的功能。这是现在的样子:
<View>
<Button
title="Prev"
color="#841584"
onPress={handleClickBackward}
/>
</View>
<View>
<Button
title="Next"
color="#841584"
onPress={handleClickForward}
/>
</View>
我如何操作我的 list
数组,以便自定义分页有效。我已经在 next 上尝试了数组切片方法,但它删除了第一张图像,并且在按下 prev 按钮后我没有找到它们。
最佳答案
你可以使用 onNextPress 函数并在 scrolview 中添加 ref
const scrollRef = useRef<ScrollView>();
const onNextPress = () => {
scrollRef.current?.scrollTo({
y : 0,//you must increase x or y
animated : true
});
}
return (
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
ref={scrollRef}//ref
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
);
关于javascript - 在 React Native 中使用 ScrollView 自定义分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65522007/