React本机FlatList numColumns={2}看起来像3

Question

我有一个带有FlatList {2}的numColumns=，但是它看起来像numColumns={3}。我试过边距:0填充:0，但它不起作用。

const ProductListComponent = () => {
    return (
        <View>
            <FlatList
                numColumns={2}
                data={dummyData}
                renderItem={({item}) => {
                    return <ProductButtonComponent text={item.title}/>
                }}
                keyExtractor={item => item.id}
                key={1}
            />
        </View>
    )
}

这是ProductButtonComponent

const ProductButtonComponent = ({text}) => {
    const navigation = useNavigation();
    return (
        <View>
            <Card>
                <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
                <Card.Title title={text}/>
                <Card.Content>
                    <Paragraph>Card content</Paragraph>
                </Card.Content>
            </Card>
        </View>
    );
}

ProductsScreen

const ProductsScreen = () => {
    return (
        <View>
            <ProductListComponent/>
        </View>
    )
}

我使用的是反应-本地纸的造型。注:我尝试了正常的反应组件，但它也使这一点。

结果：结果图像

Answer 1

您需要在视图和平面列表的样式如下所示。作为一个例子，我同意为每一个返回jsx。

ProductsScreen

<View style={{flex: 1}}>
  <ProductListComponent/>
</View>

ProductListComponent

<View style={{flex: 1}}>
  <FlatList
    renderItem={({item}) => {
      return <ProductButtonComponent text={item.title}/>
    }}
    data={dummyData}
    keyExtractor={item => item.id}
    numColumns={2}
    key={1}
    style={{flex: 1}}    
  />
</View>

ProductButtonComponent

<View style={{width: 108, height: 108}}>
  <Card>
    <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
    <Card.Title title={text}/>
    <Card.Content>
      <Paragraph>Card content</Paragraph>
    </Card.Content>
  </Card>
</View>