问如何在水平平面列表或区段列表中显示具有相同类别的所有产品

EN

const HomeScreen = ({ navigation }) => {
  const [products, setProducts] = useState<any[]>([]);
  const [categories, setCategory] = useState<any[]>([]);

  

  useEffect(() => {
    fetch("https://dummyjson.com/products")
      .then((response) => response.json())
      .then(({ products }) => {
        setProducts(products);
      })

      .catch((error) => console.log(error));
  });
  return products.length > 0 ? (
    <View
      style={{
        backgroundColor: COLORS.backgroundLight,
        marginTop: 20,
      }}
    >
      <View
        style={{
          width: "100%",
          flexDirection: "row",
          justifyContent: "space-between",
          padding: 16,
        }}
      >
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <MaterialIcons name="menu" size={30} color="black" />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate("CartScreen")}>
          <Feather name="shopping-cart" size={30} color="black" />
        </TouchableOpacity>
      </View>
      <FlatList
        data={products}
        keyExtractor={(products) => products.id.toString()}
        numColumns={2}
        renderItem={({ item }) => (
          <ProductCard
            title={item.title}
            price={item.price}
            image={item.images[0]}
            onPress={() => navigation.navigate("ProductDetails", item)}
          />
        )}
      />
    </View>
  ) : (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <ActivityIndicator size="large" />
    </View>
  );
};

export default HomeScreen;