如何在React Native中实现两行横向滚动布局？

我想要实现两行可横向滚动的分类卡片布局，目前仅完成了单行横向滚动的效果，想知道只用.map方法能否实现，还是需要用FlatList来做。

当前代码 #

Container 组件 #

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
   <View style={styles.container}>
      {
         categories.map((category, index) => {
            return <CategoryCard key={index} category={category} navigation={navigation} />
         })
      }
   </View>
</ScrollView>

CategoryCard 组件 #

const CategoryCard = ({ category, onPress }) => {
    return (
        <AppPressable
            style={styles.wrapper}
            onPress={onPress}
        >
            <View style={styles.nameWrapper}>
                <AppIcon
                    iconName={category.icon}
                    iconColor={category.color}
                    iconSize={24}
                    style={styles.icon}
                />
                <AppText style={styles.title}>{category.title}</AppText>
            </View>
        </AppPressable>
    )
}
export default CategoryCard

StyleSheet 样式 #

const CategorySearchStyle = StyleSheet.create({
    wrapper: {
        padding: 10,
        borderRadius: 10,
        marginVertical: 5,
        marginRight: 7,
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderColor: '#d3d3d3'
    },
    container: {
        flexDirection: 'row',
        flexWrap: "wrap",
        marginHorizontal: 15,
        marginBottom: 20
    },
    nameWrapper: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    title: {
        color: '#000000',
    },
    icon: {
        marginRight: 7
    }
});
export default CategorySearchStyle;

categories 数据数组 #

const categories = [
    {
        title: '艺术、手工与收藏品',
        icon: 'palette',
        color: '#3D79C2'
    },
    {
        title: '母婴用品',
        icon: 'human-child',
        color: '#FF5353'
    },
    {
        title: '美妆香氛',
        icon: 'diamond-stone',
        color: '#1DD2AF'
    },
    {
        title: '图书杂志',
        icon: 'book-open-variant',
        color: '#FE4080'
    },
    {
        title: '企业服务',
        icon: 'briefcase-variant',
        color: '#24A69A'
    },
    {
        title: '服饰鞋包',
        icon: 'tshirt-crew',
        color: '#8E4162'
    },
    {
        title: '电脑及配件服务',
        icon: 'devices',
        color: '#9A63C1'
    },
    {
        title: '教育产品',
        icon: 'school',
        color: '#9A63C1'
    },
]
export default categories

实现方案 #

两种方式都能实现目标效果，具体选哪种看你的需求：

1. 只用.map实现（快速改动） #

核心是给内部容器设置固定高度，让卡片在高度不够时自动换行成两行：
修改styles.container的样式：

container: {
    flexDirection: 'row',
    flexWrap: "wrap",
    marginHorizontal: 15,
    marginBottom: 20,
    height: 100, // 固定高度，根据卡片实际高度调整
    width: 'auto'
}

这样卡片会在高度限制下自动排列成两行，整体跟随ScrollView横向滚动。缺点是高度需要手动适配，数据量大会有性能问题。

2. 用FlatList实现（性能更优） #

FlatList自带懒加载等性能优化，适合数据量大的场景。写法和.map类似，但用FlatList的API实现：

<FlatList
    horizontal
    showsHorizontalScrollIndicator={false}
    data={categories}
    renderItem={({ item, index }) => (
        <CategoryCard key={index} category={item} navigation={navigation} />
    )}
    keyExtractor={(item, index) => index.toString()}
    contentContainerStyle={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginHorizontal: 15,
        marginBottom: 20,
        height: 100 // 同样需要设置固定高度
    }}
/>

这种方式在数据增多时，性能表现会比.map好很多。

内容的提问来源于stack exchange，提问作者serking