如何在React Native中使用SectionList实现该布局？

没问题，我来帮你搞定这个需求！要把SectionList和FlexWrap结合起来实现这种分组多列布局，核心就是让每个section的标题独占一行，下面的子分类项横向排列并自动换行，具体步骤如下：

1. 定义符合要求的Section数据结构 #

先准备好SectionList需要的sections数组，每个section包含标题和对应的子分类数据：

const categorySections = [
  {
    title: 'Fashion',
    data: ["Men's Fashion", "Women's Fashion", "Kids' Fashion", "Footwear", "Accessories"]
  },
  {
    title: 'Mobile and Electronics',
    data: ["Mobile Phones", "Laptops", "Tablets", "Headphones", "Smartwatches"]
  }
];

2. 配置SectionList的关键属性 #

重点通过contentContainerStyle开启FlexWrap，同时让section标题独占一行：

import { SectionList, View, Text, StyleSheet } from 'react-native';

// 组件内部渲染逻辑
<SectionList
  sections={categorySections}
  keyExtractor={(item, index) => `${item}-${index}`}
  // 渲染section标题，设置宽度100%确保独占一行
  renderSectionHeader={({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.headerText}>{section.title}</Text>
    </View>
  )}
  // 渲染每个子分类项
  renderItem={({ item }) => (
    <View style={styles.categoryItem}>
      <Text style={styles.itemText}>{item}</Text>
    </View>
  )}
  // 核心：开启横向排列和自动换行
  contentContainerStyle={styles.sectionListContainer}
/>

// 样式定义
const styles = StyleSheet.create({
  sectionListContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: 8,
    paddingVertical: 12
  },
  sectionHeader: {
    width: '100%', // 关键：让标题占满整行
    padding: 12,
    backgroundColor: '#f5f5f5',
    marginBottom: 8
  },
  headerText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333'
  },
  categoryItem: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    margin: 6,
    backgroundColor: '#fff',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#eee',
    // 可选：设置基础宽度，控制每行显示数量
    flexBasis: '30%',
    alignItems: 'center'
  },
  itemText: {
    fontSize: 14,
    color: '#555'
  }
});

关键细节说明 #

• contentContainerStyle：设置flexDirection: 'row'和flexWrap: 'wrap'，让所有子项横向排列，空间不足时自动换行。
• section标题的宽度：给renderSectionHeader返回的View设置width: '100%'，强制标题独占一行，不会和子分类项挤在同一行。
• 子项宽度控制：通过flexBasis可以设置每个子项的基础宽度（比如30%），这样每行会自动适配显示3个左右的子项，也可以用固定宽度替代，根据你的UI需求调整。

这样就能完美实现你想要的布局效果啦！

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