Как отобразить карточки в двух столбцах в React Native? - PullRequest
Новая
       2

Как отобразить карточки в двух столбцах в React Native?

3 голосов
/ 08 января 2020

У меня есть этот код, который делает карты, но он отображает только три карты и не отображает четвертую карту и не отображает карты в 2 столбцах. Есть ли способ немного изменить код, чтобы он мог отображать карточки в 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%'
    }
})

Ответы [ 4 ]

1 голос
/ 08 января 2020

используйте вместо этого плоский список, 

<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
 }
/>

надеюсь, это вам поможет.

0 голосов
/ 08 января 2020 
container:{
      flexDirection: 'row',
      flexWrap: 'wrap',
},
0 голосов
/ 08 января 2020

Вам нужно обернуть 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>
0 голосов
/ 08 января 2020

Самый простой способ - разделить его на 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>
...