React Native实现FlatList下拉项按索引独立展开互不影响

问题根因 #

现有实现里所有下拉项共用同一个布尔类型的全局show状态，本质是把「是否展开」做成了全局统一开关，没有和每个列表项的索引做绑定，自然点击任意项都会触发所有项的展开/收起联动。

具体实现步骤 #

• 移除原来用useReducer定义的全局布尔类型show状态，替换为存储当前展开项索引的状态，初始值设为null（代表默认无展开项）

  import { useState } from 'react';
  // 单展开模式下只存一个索引值即可
  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
  

• 编写项点击切换逻辑：点击某一项时，如果当前expandedIndex等于该项索引，就把状态重置为null（收起当前项）；如果不相等，就把expandedIndex更新为当前项的索引（自动收起之前展开的其他项，仅展开当前点击项）

  const handleToggle = (currentIndex: number) => {
    setExpandedIndex(prev => prev === currentIndex ? null : currentIndex);
  };
  

• 渲染FlatList列表项时，把原来传入AnimateHeight组件、MotiView箭头动画的全局show属性，替换为当前项的独立判断值：show={expandedIndex === item.index}，点击事件绑定传入对应项的索引调用handleToggle即可。
• 你之前封装的animate-height.tsx高度动画组件不需要做任何改动，原有的Moti动画、reanimated逻辑可以完全复用。

优化注意点 #

• 不要在FlatList的renderItem内部给每个项单独维护展开状态，FlatList的组件回收复用机制会导致滚动时出现展开状态错乱、展开项错位的问题，把展开状态统一放在列表父组件管理是最稳定的方案。
• 如果后续需要改造成多区块同时展开的效果，只需要把expandedIndex替换为存储展开索引集合的Set类型，点击时判断索引是否在集合内做增删操作即可。

若需要默认展开某一项，直接把expandedIndex的初始值设为对应项的索引即可，比如默认展开第一项就设置初始值为0。

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