React Native Paper List Accordion 展开精通：用 'expanded' Prop 掌控条件展开

2024-03-02 02:43:26

## React Native Paper List Accordion: Mastering Conditional Expansion with the 'expanded' Prop

作为一名经验丰富的程序员和技术作家，我将分享如何使用 React Native Paper List Accordion 的 expanded prop 来实现基于条件的 accordion 展开。让我们深入了解这个强大的组件，掌握其精髓。

理解 `expanded` Prop

expanded prop 控制 accordion 是否展开。它接受布尔值，true 表示展开，false 表示折叠。通过设置此 prop，我们可以根据特定条件动态展开或折叠 accordion。

场景：基于搜索和手动切换的条件展开

想象一下一个包含 accordion 列表的应用程序。用户可以通过搜索栏搜索项目，或通过点击 accordion 手动展开和折叠它们。我们要实现以下行为：

手动点击展开 accordion。
当搜索查询匹配时展开包含匹配项目的 accordion。
在清空搜索查询时折叠所有 accordion。

实现

手动切换：

// 响应 accordion 手动点击
const handleAccordionToggle = (item) => {
  setIsManuallyToggled({ ...isManuallyToggled, [item.title]: true });
  isOpen.current[item.title] = !isOpen.current[item.title];
};

搜索条件：

// 根据搜索查询过滤项目
const filterByCondition = (array) => {
  return array.reduce((accArray, obj) => {
    // 匹配搜索查询的项目
    if (obj.title.toLowerCase().includes(searchQuery.toLowerCase())) {
      accArray.push({ ...obj });
    }
    // 递归过滤嵌套项目
    else if (obj.items) {
      const items = filterByCondition(obj.items);
      if (items.length > 0) {
        accArray.push({ ...obj, items });
      }
    }
    return accArray;
  }, []);
};

折叠空查询：

// 重置手动切换状态并折叠 accordion
const resetAccordions = () => {
  setIsManuallyToggled({});
  Object.keys(isOpen.current).forEach((key) => (isOpen.current[key] = false));
};

渲染条件 accordion：

// 渲染具有条件展开行为的 accordion
const renderItems = (items) =>
  items.map((item, index) => {
    return (
      // 手动切换或搜索匹配时展开 accordion
      <List.Accordion
        onPress={() => {
          handleAccordionToggle(item);
        }}
        expanded={
          (isManuallyToggled[item.title] && searchQuery.length !== 0)
          || (isManuallyToggled[item.title] && searchQuery === '')
          || (searchQuery !== '' && anyItemMatchesQuery(item.items, searchQuery))
        }
        {...props}
      >
        // 渲染嵌套项目
        {renderItems(item.items)}
      </List.Accordion>
    );
  });