如何使用SectionList实现指定分区的展开与折叠功能？

我明白你遇到的问题了——当SectionList分区较多时，用单个变量跟踪展开状态根本行不通，因为每个分区需要独立的状态。下面是针对你现有代码的完整解决方案，帮你实现点击标题展开/折叠对应分区的功能：

核心思路 #

用一个对象来记录每个section的展开状态，以section的id（保证唯一）作为键，布尔值作为是否展开的标识。这样每个分区的状态可以独立控制，不会互相干扰。

具体代码修改 #

1. 调整组件State结构

在constructor中添加expandedSections对象，用于存储每个section的展开状态：

constructor(props) {
  super(props);
  const { selectedCity, firstSliderValue, secondSliderValue } = this.props.navigation.state.params;
  this.state = {
    selectedCity,
    firstSliderValue,
    secondSliderValue,
    expandedSections: {} // 空对象，后续初始化每个section的状态
  };
}

2. 初始化展开状态

当Redux获取到数据后，初始化所有section为默认展开状态，在componentDidUpdate中处理：

componentDidUpdate(prevProps) {
  // 仅当searchTime数据变化时初始化
  if (prevProps.searchTime !== this.props.searchTime && this.props.searchTime.length > 0) {
    const initialExpanded = {};
    this.props.searchTime.forEach(section => {
      initialExpanded[section.id] = true; // 默认全部展开，可改为false设置默认折叠
    });
    this.setState({ expandedSections: initialExpanded });
  }
}

3. 修改Section Header的点击事件

更新sectionComp方法，点击时切换对应section的展开状态，还可以添加图标提示用户当前状态：

sectionComp = (info) => {
  const { section } = info;
  // 切换展开状态的逻辑
  const toggleSection = () => {
    this.setState(prevState => ({
      expandedSections: {
        ...prevState.expandedSections,
        [section.id]: !prevState.expandedSections[section.id]
      }
    }));
  };

  return (
    <TouchableOpacity onPress={toggleSection}>
      <View style={{ flex: 1, backgroundColor: "#DCDCDC", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 10 }}>
        <Text style={styles.sectionTitle}>{section.title}</Text>
        {/* 添加展开/折叠图标，提升用户体验 */}
        <Text style={{ fontSize: 16 }}>{this.state.expandedSections[section.id] ? '▼' : '▶'}</Text>
      </View>
    </TouchableOpacity>
  );
}

4. 动态控制Section的Item显示

在render方法中，根据展开状态生成动态的sections数组，折叠的section将data设为空数组，这样SectionList就不会渲染其item：

render() {
  const movieData = this.props.searchTime;
  if (this.props.loading) {
    return <Spinner text='Loading...' />;
  }

  // 生成动态sections：根据展开状态决定是否显示item
  const dynamicSections = movieData.map(section => ({
    ...section,
    data: this.state.expandedSections[section.id] ? section.data : []
  }));

  return (
    <View style={{ flex: 1 }}>
      <SectionList
        renderSectionHeader={this.sectionComp}
        renderItem={this.renderSectionItem}
        sections={dynamicSections}
        keyExtractor={(item, index) => item.id || index.toString()} // 建议用item的唯一id，避免index重复问题
        ItemSeparatorComponent={() => <View style={styles.separator} />}
      />
    </View>
  );
}

5. 优化Redux Action（可选）

因为展开状态是组件本地交互状态，不需要存在Redux中，所以可以去掉action里的expand: true：

// 修改fetchSearchTime中的数据处理部分
const movieData = responseData.reduce((r, s) => {
  r.push({ 
    title: s.theaterCn, 
    id: s._id, 
    data: s.movie 
  });
  return r;
}, []);

方案优势 #

• 每个分区的展开状态独立控制，不会出现状态混乱的问题
• 通过动态修改data数组控制item渲染，性能更优，不需要额外的条件判断
• 本地状态管理，不污染Redux的业务数据，符合React状态管理最佳实践

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