React Native实现按字母标题单独控制列表项显隐

方案一：修改现有StickyHeaderFlatlist代码，独立管理每个分组的显隐状态 #

问题根源是你用了全局的单个显隐状态，导致所有分组同步切换。改成每个分组对应独立状态即可：

1. 替换全局状态为分组状态对象
   在Main.js中，把原来的单个isVisible状态改成保存每个字母分组展开状态的对象：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import StickyHeaderFlatlist from 'your-sticky-header-library-path'; // 替换为实际导入路径
import dummyData from './dummydata';

export default function Main() {
  // 初始化每个分组的展开状态，默认全部展开
  const [expandedSections, setExpandedSections] = useState(() => {
    const initialState = {};
    dummyData.forEach(section => {
      initialState[section.title] = true;
    });
    return initialState;
  });

  // 切换指定分组的显隐状态
  const toggleSection = (title) => {
    setExpandedSections(prevState => ({
      ...prevState,
      [title]: !prevState[title]
    }));
  };

  return (
    <StickyHeaderFlatlist
      sections={dummyData}
      renderSectionHeader={({ section }) => (
        // 把标题改成可点击的TouchableOpacity
        <TouchableOpacity 
          style={styles.header}
          onPress={() => toggleSection(section.title)}
        >
          <Text style={styles.headerText}>{section.title}</Text>
        </TouchableOpacity>
      )}
      renderItem={({ item, section }) => {
        // 根据当前分组的展开状态决定是否渲染列表项
        if (!expandedSections[section.title]) return null;
        return (
          <View style={styles.item}>
            <Text>{item.name}</Text>
          </View>
        );
      }}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

// 示例样式
const styles = StyleSheet.create({
  header: {
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  },
  headerText: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  }
});

2. 核心逻辑说明
   • 用expandedSections对象存储每个字母分组的展开状态，键是分组标题（如"A"、"B"），值是布尔值
   • toggleSection函数只修改对应分组的状态，不影响其他分组
   • 渲染列表项时，根据当前分组的状态决定是否显示

方案二：集成accordion-collapse-react-native库实现独立折叠 #

如果想用现成的折叠组件库，按以下步骤集成：

1. 安装依赖

npm install accordion-collapse-react-native
# 或
yarn add accordion-collapse-react-native

2. 修改Main.js代码，用Accordion组件包裹每个分组

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import StickyHeaderFlatlist from 'your-sticky-header-library-path';
import { Accordion } from 'accordion-collapse-react-native';
import dummyData from './dummydata';

export default function Main() {
  return (
    <StickyHeaderFlatlist
      sections={dummyData}
      renderSectionHeader={({ section }) => (
        <Accordion
          // 自定义折叠面板的头部
          header={
            <View style={styles.header}>
              <Text style={styles.headerText}>{section.title}</Text>
            </View>
          }
          // 自定义折叠面板的内容（当前分组的列表项）
          content={
            <View>
              {section.data.map((item, index) => (
                <View key={index} style={styles.item}>
                  <Text>{item.name}</Text>
                </View>
              ))}
            </View>
          }
        />
      )}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

// 示例样式
const styles = StyleSheet.create({
  header: {
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  },
  headerText: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  }
});

3. 逻辑说明
   • Accordion组件会自动管理当前分组的折叠状态，无需手动维护状态
   • 头部和内容都可以完全自定义，适配你的UI需求
   • StickyHeaderFlatlist的粘性头部功能依然生效，因为我们只是把折叠组件作为sectionHeader的内容

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