react-native - 无法为 FlatList 项目分配宽度

Question

我在为 FlatList 中包含的卡片分配宽度时遇到问题。我尝试使用 为 FlatList 列分配 50% 的宽度columnWrapperStyle={{ width: "50%" }}，但它不起作用。

我正在使用 FlatList 在两列中显示卡片列表

   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

尝试这个。

1. 移除columnWrapperStyle道具。
2. 将宽度设置为renderItem

获取宽度Dimensions（在顶部声明）

const { width }=Dimensions.get("window")

renderItem并在方法中使用它

const renderItem = ({ item }: { item: Item }) => (
    <View style={{width: width/2}}><FavCard title="Mojito" description="Description" /></View>
  );

Answer 2

请尝试删除columnWrapperStyle道具或将其设置width为 100%，因为这是每一列的样式。您有 2 列，因此与外部容器宽度（屏幕宽度的 100%）相比，宽度必须为 50%。因此，如果您设置width: "50%"，每列将是屏幕宽度的 25 美元。

Answer 3

改变它

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

至

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

并使用精确值或 flex:1 定义项目的宽度。但宽度不是百分比。

例子

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