React-native可扩展的flatlist。当打开另一个

Question

时关闭打开的项目

我有一个可扩展的flatList，但是我需要在打开另一个选项卡时关闭一个现有的选项卡。

  const [expandable, setExpandable] = useState(false);
  const [titleColor, setTitleColor] = useState(colors.blue.primary)

  const onPress = () => {
    if (!expandable) {
      setExpandable(true);
      setTitleColor(colors.blue.secondary);
    }
    else {
      setExpandable(false);
      setTitleColor(colors.blue.primary);
    }
  };

  return (
    <StyledView>
      <TouchableWithoutFeedback onPress={onPress}>
        <StyledListItem {...props}>
          <ListTitle style={{ color: titleColor }}>{title}</ListTitle>
          <Icon name="add" size={24} color={titleColor} />
        </StyledListItem>
      </TouchableWithoutFeedback>
      {expandable && <MyListDetails faqDetail={details} />}
      <StyledLine></StyledLine>
    </StyledView>
  );
}

我需要保存打开的标签页的状态并关闭它们，但是我不知道该怎么做。有人可以帮我吗？谢谢！

Answer 1

代替每个具有“可扩展”值的项目……在呈现列表的组件的顶层使用“ expandedItem”状态值。然后，每次选择一个，将expandedItem设置为该项目。然后将expandedItem和onPress处理程序向下传递到每个renderItem。