如何在 React Native 中僅擴展列表項手風琴中的一項？

Question

我最近開始學習 React Native，我正在嘗試構建我的第一個應用程序，但我遇到了這個問題，我不知道如何解決它，我使用庫 React Native Elements 和 ListItem.Accordion 並創建了這個元素：

{meals.map((item, index) => {
        return (
          <ListItem.Accordion 
          theme={{ colors: { primary: "#4169e1" } }}
          style={tw`px-3 rounded py-3 text-white`}
          containerStyle={{ backgroundColor: "#000000", borderRadius: "10px" }}
          content={
            <>
              <Text style={tw`text-5xl mr-2`}>☀️</Text>
              <ListItem.Content>
                <ListItem.Title style={tw`font-bold text-white`}>{item.title}</ListItem.Title>
                <Text style={tw`text-white`}>480 calories</Text>
              </ListItem.Content>
            </>
          }
          key={index}
          index={index}
          noRotation
          isExpanded={expanded}
          icon={
            <Icon
              style={tw`mt-3 p-2`}
              size={35}
              name="add-circle-outline"
              color="white"
              type="material"
            />
          }
          onPress={() => {
            setExpanded(!expanded);
          }}
        >
          <ListItem
            containerStyle={{ backgroundColor: "#000000", borderRadius: "10px" }}
            style={tw`px-3 mt-[-25]`}
            onPress={() => console.log("hi")}
            bottomDivider
          >
            <ListItem.Content>
              <ListItem.Title>
                <Divider width={1} style={tw`w-full`} />
                <View style={tw`justify-around items-center flex-row w-full`}>
                  <View>
                    <Text style={tw`text-gray-400`}>Fats</Text>
                    <Text style={tw`font-bold text-white`}>28.4</Text>
                  </View>
                  <View>
                    <Text style={tw`text-gray-400`}>Carbs</Text>
                    <Text style={tw`font-bold text-white`}>42.32</Text>
                  </View>
                  <View>
                    <Text style={tw`text-gray-400`}>Prot</Text>
                    <Text style={tw`font-bold text-white`}>60,45</Text>
                  </View>
                  <View>
                    <Text style={tw`text-gray-400`}>RDC</Text>
                    <Text style={tw`font-bold text-white`}>12%</Text>
                  </View>
                </View>
              </ListItem.Title>
              <ListItem.Subtitle style={tw`p-2`}>
                <View style={tw`py-3`}>
                  <View
                    style={tw`flex-row py-5 items-center justify-between w-full`}
                  >
                    <View style={tw`flex-row ml-2`}>
                      <Icon
                        name="restaurant-menu"
                        size={50}
                        color="white"
                        type="material"
                      />
                      <View style={tw`ml-3 justify-center`}>
                        <Text style={tw`font-bold text-white`}>Pepperoni Sandwich</Text>
                        <Text style={tw`text-white`}>2 pieces</Text>
                      </View>
                    </View>
                    <Icon name="edit" size={30} color="white" type="material" />
                  </View>
                </View>
              </ListItem.Subtitle>
            </ListItem.Content>
          </ListItem>
        </ListItem.Accordion>
        )
      })}
    </View>
  );
};

當我按下時，所有項目都會展開，當我要實現的是只顯示我select的項目時，誰能給我一些建議嗎？ 提前致謝：）

Answer 1

看看你在這里做什么：

isExpanded={expanded}

您有一個boolean 值來指示是否所有列表都已“擴展”。 boolean 值恰好有兩種狀態，真或假。 所以你的列表正好有兩種狀態，全部展開或全部折疊。

相反，將這些狀態存儲為多個boolean 值。 如果您可以修改meals數組，那將是將其作為該數組中對象的附加屬性放置的理想位置。 所以你可能會這樣：

isExpanded={item.expanded}

並用這樣的東西更新它：

onPress={() => {
  setMeals(meals.map(m =>
    m.id === item.id ?
    {...m, expanded: !m.expanded} :
    m
  ));
}}

當然請注意，這都是基於對您的meals數組的假設（例如在項目上有一個id ）並且僅用於說明目的。 這里的想法是meals數組中的每個 object 都有一個expanded屬性，事件處理程序只需為此處使用的特定 object 更新該屬性。

---

或者，您可以將“擴展項目”列表保存在單獨的數組中。 保持兩個 arrays 在長度和排序方面同步可能很困難，但你可以只擁有一個“當前擴展項目”的數組：

const [expandedItems, setExpandedItems] = useState([]);

然后只需從該數組中添加/刪除。 所以要使用它你會這樣做：

isExpanded={expandedItems.includes(item.id)}

你會像這樣更新它：

onPress={() => {
  if (isExpanded.includes(item.id)) {
    setIsExpanded(isExpanded.filter(i => i !== item.id));
  } else {
    setIsExpanded([...isExpanded, item.id]);
  }
}}

這里的想法是只有一個 ID 值數組，指示列表的哪些元素被“擴展”。 您可以將其從列表中刪除以折疊或將其添加到列表以展開。

---

無論您以何種方式構建它，總體概念仍然是相同的。 為了單獨跟蹤這些單獨元素的狀態，您需要為它們設置單獨的值。