如何在 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
}
/>

Answer 2

container:{
flexDirection: 'row',
flexWrap: 'wrap',
},

Answer 3

最简单的方法是将其分成 2 个视图，如果您有有限/固定数量的卡片

<View style={{flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
<Card1 style={{flex:1}}/>
<Card2 style={{flex:1}}/>
</View>
<View style={{flexDirection: 'row'}}>
<Card3 style={{flex:1}}/>
<Card4 style={{flex:1}}/>
</View>
<View>

Answer 4

您需要将Card包装成两部分View

更改的代码

<View style = {styles.container}>
<View style ={styles.item}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}}>
<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>
</View>
<View style ={styles.item}>  
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}}>
<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>
</View>