时间戳

首页 > 解决方案 > 水平滚动视图，一列中有 2 个项目，一次可见 3 个项目

react-native - 水平滚动视图，一列中有 2 个项目，一次可见 3 个项目

问题描述

我想实现如下 [![enter image description here][1]][1]

以上只是画面的一部分。我的实际屏幕非常复杂。所以我的父视图是scrollview所以我不能FlatList用来实现上面的ui

我希望每列有 2 个项目，一次显示 6 个项目，现在当用户滑动时，接下来的 6 个项目应该以相同的格式显示。

以下是我的代码

<ScrollView
        style={{ flex: 1 }}
        horizontal={true}
        nestedScrollEnabled={true}
        contentContainerStyle={{
          flex: 1,
          flexWrap: "wrap",
        }}
      >
        {items.map((item, index) => {
          return (
            <Image
              source={item}
              style={{
                width: width / 3.4,
                marginVertical: 5,
                marginHorizontal: 3,
                borderRadius: 10,
                resizeMode: "cover",
              }}
              key={String(index)}
            />
          );
        })}
      </ScrollView>

但我不断地获得一列中的所有项目或一行中的所有项目

标签： react-nativehorizontalscrollview

解决方案

您的方法应该假设您的数组是 [1,2,3,4,5,6,7,8,9,10,11,12] ，其中 1,2,3... 是元素。

现在，将数组变成由 6 个数组组成的数组，每个数组像 [[1,2,3,4,5,6],[7,8,9,10,11,12]]。

主数组将是您的滚动视图，它将其 2 个子数组表示为水平...并且在滚动视图内部，将键传递给其子元素以获取子元素...并且每个智利元素将是带有 numColumns={3} 的平面列表。

它将完美地工作

推荐阅读