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

Question

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

就像这张图片：

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

Answer 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

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

React-Native render a horizontal List that have 2 rows

react-native

react-native-flatlist