React-Native 渲染一个有 2 行的水平列表答案

【问题标题】：React-Native render a horizontal List that have 2 rowsReact-Native 渲染一个有 2 行的水平列表
【发布时间】：2021-09-22 20:09:35
【问题描述】：

我想实现一个有 2 行的列表，我可以水平滚动并显示更多（两行）

就像这张图片：

我有一个包含这些项目的数组，但我不知道如何在 flatlist 中执行此操作，因为我们一次只渲染一个项目。另外，如果flatlist或scrollList不能应用，是否有任何组件？

【问题讨论】：

只是为了更好地理解您的列表是什么？ [[], [], [], ]
它们是单独滚动还是一起滚动？你想要的结果到底是什么？你尝试过什么？
@MuniKumarGundu no my list is a normal list with object for each item -> [{ }, { }, ...]
@windowsill 如果我向上或向下滚动到所有滚动，我想要。当我单击一个时，它会打开类别页面。我试过的是一个普通的 flatList
@SDB_1998，你试过我的答案了吗？

标签： react-native react-native-flatlist

【解决方案1】：

如果您只有一个列表并且需要显示 2 行

<ScrollView
          horizontal
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingVertical: 20 }}>
          <FlatList
            scrollEnabled={false}
            contentContainerStyle={{
              alignSelf: 'flex-start',
            }}
            numColumns={Math.ceil(list.length / 2)}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            data={list}
            renderItem={({ item, index }) => {
            //your image code 
        }}
          />
</ScrollView>

Snack URL

【讨论】：

@SDB_1998 欢迎您:)