it-swarm.com.de

Wie erstelle ich zwei Spalten mit Leerzeichen dazwischen? - flatList

Hallo, ich bin neu in React Native.

Ich versuche, ein Layout mit zwei Spalten mit einem Zwischenraum zu erstellen, indem ich die native Reaktionskomponente flatList verwende.

Hier ist mein Sichtcode:

<View style={styles.container}>
        <FlatList
            data={db}
            keyExtractor={ (item, index) => item.id }
            numColumns={2}
            renderItem={
                ({item}) => (
                    <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                        <View style={styles.listItem}>
                            <Text style={styles.title}>{item.name}</Text>
                            <Image
                                style={styles.image}
                                source={{uri: item.image}}
                            />
                            <Text style={styles.price}>{item.price} zł</Text>
                        </View>
                    </TouchableWithoutFeedback>
                )
            }
        />
    </View>

Hier ist Stile:

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    marginBottom: 40
},
listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
},

Und das Ergebnis sind zwei Spalten, aber ohne Leerzeichen dazwischen. Können Sie mir bei der Lösung dieses Problems helfen?

5
user1559599

Sie müssen den styles.container der contentContainerStyle Eigenschaft von Flatlist geben, wie folgt:

<FlatList
        data={db}
        keyExtractor={ (item, index) => item.id }
        contentContainerStyle={styles.container}
        numColumns={2}
        renderItem={
            ({item}) => (
                <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                    <View style={styles.listItem}>
                        <Text style={styles.title}>{item.name}</Text>
                        <Image
                            style={styles.image}
                            source={{uri: item.image}}
                        />
                        <Text style={styles.price}>{item.price} zł</Text>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    />
5
Komeyl94

Fügen Sie einfach einen Rand zum Stil des Listenelements hinzu.

listItem: {
  margin: 10,
}
1
Peyotle

Anhand Ihres Beispiels können Sie Ihren Listenelementstilen ein margin hinzufügen:

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    margin: 18,
},

Beachten Sie, dass dies gleichbedeutend ist mit:

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    marginTop: 18,
    marginBottom: 18,
    marginRight: 18,
    marginLeft: 18,
},

Fertigen Sie zu Ihrem Mögen oder zu Spezifikation besonders an :)

0
TechnoTim

Ich habe diese Bibliothek nicht verwendet, aber das Hinzufügen von padding: 10 zu listItem-Stilen sollte helfen.

0
Saleel

Verwenden von ItemSeparatorComponent zum Rendern einer Komponente zwischen Elementen

    <FlatList
        data={places}
        contentContainerStyle={{ paddingLeft: responsiveSize( 32 ) }}
        style={[
            styles.wrapperPlaces,
            placesDetailActive
                ? styles.wrapperPlacesPlacesDetailActive
                : null
        ]}
        horizontal
        ItemSeparatorComponent={() => <Spacing size="medium" horizontal />}
        keyExtractor={item => item.id}
        renderItem={( { item } ) => (
            <PlaceBox place={item} onPress={() => onPressPlace( item.id )} />
        )}
    />
0
Nicolas Sturm