react-native - FlatList アイテムに幅を割り当てることができません

Question

FlatList 内に含まれるカードに幅を割り当てる際に問題が発生しています。を使用して FlatList 列に 50% の幅を割り当てようとしましたが、うまくいきcolumnWrapperStyle={{ width: "50%" }}ません。

FlatList を使用して、カードのリストを 2 列で表示しています

   const DATA: Item[] = [
    {
      id: "1",
      title: "First Item",
    },
    {
      id: "2",
      title: "Second Item",
    },
    {
      id: "3",
      title: "Third Item",
    },
    {
      id: "4",
      title: "Fourth Item",
    },
  ];
  const renderItem = ({ item }: { item: Item }) => (
    <FavCard title="Mojito" description="Description" />
  );
  return (
    <FavouriteCocktailsContainer>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        horizontal={false}
        numColumns={2}
        columnWrapperStyle={{ width: "50%" }}
      />
    </FavouriteCocktailsContainer>

アイテムFavCardのスタイルは次のとおりです。

export const CardContainer = styled.TouchableOpacity`
  width: 100%;
  height: 208px;
  border-radius: 16px;
`;

およびFavouriteCocktailsContainer :

export const FavouriteCocktailsContainer = styled.View`
  width: 100%;
`;

これは私が得るものです：

カードをFavouriteCocktailsContainerの 50% 幅にしたいのですが、これを修正する方法を教えてください。前もって感謝します

Answer 1

変更するだけ

 columnWrapperStyle={{ width: "50%" }}

に

 columnWrapperStyle={{ justify-content: "space-between" }}

アイテムの幅を正確な値または flex:1 で定義します。ただし、幅は %percentage ではありません。

例

export const CardContainer = styled.TouchableOpacity`
  width: 100%; // No
  width: your width of item exp 200// YES
  flex: 1 // Yes
  height: 208px;
  border-radius: 16px;
`;