javascript - 在 React Native 中使用 ScrollView 自定义分页

Question

在我的应用程序中，我使用 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 按钮后我没有找到它们。

Answer 1

你可以使用 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>
            );