React Native实现Gmail式折叠标签：点击切换自动关闭其他面板

需求：使用react-native-collapsible实现类似Gmail的线程折叠逻辑：

• 点击任意邮件线程，展开该线程并自动关闭其他所有线程
• 点击当前已展开的线程，切换为折叠状态

现有代码问题分析 #

当前代码将collapsedIndex定义为数组类型，但逻辑中用collapsedIndex !== index判断折叠状态，状态管理逻辑不符合需求，无法实现“点击当前线程切换状态、其他线程自动关闭”的效果。

修改后的实现代码 #

import Collapsible from "react-native-collapsible";

// 用单个值存储当前展开的索引，初始为null表示全部折叠
const [expandedIndex, setExpandedIndex] = useState(null);

const renderEmailBody = (emailItem) => {
  return (
    <View>
      {emailItem?.body ? (
        <RenderHtml
          contentWidth={width}
          source={{
            html: emailItem?.body,
          }}
          renderersProps={{
            a: {
              onPress: (event, href) => {
                navigate("WebView", href);
              },
            },
          }}
        />
      ) : null}
    </View>
  );
};

const renderEmailData = ({ item, index }) => {
  return (
    <>
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          // 点击逻辑：如果当前索引是已展开的，就折叠（设为null）；否则展开该索引
          setExpandedIndex(prev => prev === index ? null : index);
        }}
      >
        {/* 判断折叠状态：只有当前索引等于expandedIndex时才展开，其余都折叠 */}
        <Collapsible collapsed={expandedIndex !== index}>
          {renderEmailBody(item)}
          {item?.attachments
            ? item?.attachments?.map((innerItem, rowIndex) => {
                return <View key={rowIndex?.toString()}>...</View>;
              })
            : null}
        </Collapsible>
      </TouchableOpacity>
    </>
  );
};

const renderEmailDetailsList = () => {
  var data = emailDetailsList;

  return (
    <FlatList
      nestedScrollEnabled
      ref={flatListRef}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
      data={data}
      ItemSeparatorComponent={() => <View />}
      renderItem={renderEmailData}
      keyExtractor={(item, index) => index.toString()}
      onEndReachedThreshold={0}
    />
  );
};

关键修改点 #

1. 状态类型调整：将原来的数组状态collapsedIndex改为单个值expandedIndex，用来存储当前唯一展开的线程索引，初始值null代表所有线程都处于折叠状态。
2. 点击事件逻辑优化：使用函数式更新判断当前状态，点击时如果是已展开的线程则切换为折叠（设置为null），否则设置为当前索引，实现“展开当前、关闭其他”的效果。
3. 折叠状态判断修正：Collapsible的collapsed属性直接判断当前索引是否等于expandedIndex，只有匹配时才展开，其余自动折叠。

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