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

Question

我想达到如下效果[![在此处输入图片描述][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>

但我一直在获取一列中的所有项目或一行中的所有项目

Answer 1

你的方法应该是假设您的数组是 [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]]。

主数组将是您的 scrollview，它将其 2 个子数组表示为水平...并且在 scrollview 内部将键传递给其子元素以获取子元素...并且每个智利元素将是 flatlist with numColumns={ 3}.

它将完美运行

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

Horizontal ScrollView with 2 items in a columns and 3 items visible at a time

horizontalscrollview

react-native