0

我对本机反应很陌生。所以现在这里的问题是我想一次只展开和折叠一个项目。目前，即使我只点击一个项目，每个项目都会同时展开和折叠有什么建议吗？下面是我的代码，我附上了我的屏幕截图。

export default function AppCollapsible({ data }: { data: any }) {
  const [collapsed, setCollapsed] = useState(true);
  const [multipeSelect, setMultipleSelect] = useState(false);

  const isExpanded = () => {
    if (collapsed) {
      setCollapsed(false);
    } else {
      setCollapsed(true);
    }
  };

  useEffect(() => {});
  return (
    <View style={styles.listContainer}>
      <TouchableOpacity onPress={isExpanded}>
        <View style={styles.list}>
          <Text style={styles.accName}>Current / Savings</Text>
          <Text style={styles.accValue}>MYR 40,000</Text>

          <View style={styles.imageIcon}>
            <Image
              source={require('ngcc_poc/src/assets/icons/active/ChevronDown.png')}
            />
          </View>
          <Collapsible collapsed={collapsed} align="center">
            <CurrentSavingsCard />
          </Collapsible>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={isExpanded}>
        <View style={styles.list}>
          <Text style={styles.accName}>Fixed Deposit</Text>
          <Text style={styles.accValue}>MYR 180,000</Text>

          <View style={styles.imageIcon}>
            <Image
              source={require('ngcc_poc/src/assets/icons/active/ChevronDown.png')}
            />
          </View>
          <Collapsible collapsed={collapsed} align="center">
            <FixedDeposit />
          </Collapsible>
        </View>
      </TouchableOpacity>
      
    </View>
  );
}

在此处输入图像描述

4

2 回答 2

1

这不是一个完整的答案，而是@laurenyz 建议您的灵感来源。

你可以看看这个。我将状态逻辑提取到一个新组件ToggleView

function ToggleView({name, value}) {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <TouchableOpacity onPress={() => setCollapsed(!collapsed)}>
      <View style={styles.list}>
        <Text style={styles.accName}>{name}</Text>
        <Text style={styles.accValue}>{value}</Text>
      </View>
    </TouchableOpacity>
  );
}

export default function AppCollapsible({ data }: { data: any }) {
  return (
    <View style={styles.listContainer}>
      {
        data.map((item) => {
          return (
            <ToggleView 
              key={item.id}
              name={item.name}
              value={item.value}
            />
          )
        })
      }
    </View>
  );
}
于 2020-09-04T10:08:36.413 回答
0

我有一个类似的问题 - 我可以想到 2 个选项。

  1. 您可以将它们分解为单独的组件，以便它们具有单独的collapsed值。
  2. 您可以给他们 id 并使用 useState 设置活动 id。如果您希望一次只打开一个，您可以将默认值设置为“”。`const [collapsedId, setCollapsedId] = useState(""); 如果您希望能够拥有多个，您可以将默认设置为一个数组，然后通过它们的 id onClick 添加或删除项目。
于 2020-09-04T00:47:04.730 回答