如何在 React Native 中以两列显示卡片？

Question

我有这个制作卡片的代码，但它只显示三张卡片，不显示第四张卡片，也不显示两列卡片。有什么方法可以稍微更改代码，使其可以在 2 列中显示卡片并显示所有卡片？我曾尝试通过使用不同的选项更改 Stylesheet.create 来修改代码，但由于缺乏知识和经验，我无法实现它。

import React from 'react'
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import {ScrollView, StyleSheet, Text,Image, TouchableOpacity, View} from 'react-native';
import { Ionicons, AntDesign } from '@expo/vector-icons';
class App extends React.Component{
render(){
        return(
            <ScrollView>
            <View style = {styles.container}>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                </View>
            </ScrollView>
        )
    }

}

export default App;

const styles = StyleSheet.create({
    container:{
          flexDirection: 'row',
          alignContent:'stretch',

    },
    item:{

      width: '50%'
    }
})

Answer 1

你可以flatlist改用。

代码：

<FlatList style={{margin:5}}
    data={this.state.items}
    numColumns={2} <-- you can change number of columns by changing this value
    keyExtractor={(item, index) => item.id }
    renderItem={(item) => 
        <Card /> <-- render your card component here
    }
/>