Réagir Natif FlatList avec des colonnes, le Dernier point de la largeur de

Je suis en utilisant un FlatList pour afficher une liste d'éléments de deux colonnes

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

La carte de composant est juste un point de vue avec certains styles:

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

Il fonctionne très bien, mais si le nombre d'éléments est bizarre, la dernière ligne ne contient qu'un seul élément, et que le point s'étend sur toute la largeur de l'écran.

Comment puis-je régler l'élément de la même largeur que les autres?

Réagir Natif FlatList avec des colonnes, le Dernier point de la largeur de

InformationsquelleAutor Escobar5 | 2017-04-19
  1. 20

    Il ya quelques choses que vous pouvez essayer ici.

    A) définition d'un pré-défini la largeur de la carte ( Peut-être égale à la hauteur que vous avez mis? ). Ensuite, vous pouvez utiliser alignItems afin d'avoir la carte placée dans le milieu ou sur la gauche savez pas à qui vous avez voulu ici.

    B) S'il y a un nombre pair de cartes, vous pouvez ajouter une Vue vide à la fin afin de remplir cet espace. Je trouve cette méthode assez maladroit, mais utile lorsque vous essayez de laisser de l'espace pour les éléments futurs.

    C), il suffit d'utiliser alignItems: 'space-between, j'aime l'utiliser pour le centre d'éléments, mais vous pouvez définir la largeur, ou utiliser quelque chose comme flex:0.5

    Je suggère à la recherche de plus en flexbox pour vous aider avec cela, car il est difficile de dire le contexte de cette situation. Je suis en supposant que les méthodes ci-dessus aidera, mais si pas, voici quelques liens pour vous de regarder au -

    Premier lien

    Deuxième lien

    Troisième lien Lien Cassé

    Espère que cette aide. Si vous avez besoin d'autres précisions - il suffit de demander

    • B est raisonnable de hack. L'Option A est redondant, on peut définir simplement à aligner comme ceux par l'ajout de flexWrap. Quel est le but de numColumns dans ce cas?
    • J'ai été recluctant pour aller avec B, mais je l'ai fait, et si c'est un hack qui fonctionne bien, et je n'ai pas de spécifier la largeur des éléments (j'en veux pour ajuster à la largeur disponible)
    • Je veux d'abord cellule entièrement extensible et avec 3 colonnes, que dois-je faire ??
    InformationsquelleAutor Ryan Turnbull
  2. 16

    pour votre cas d'utilisation flex: 1/2

    donc: Votre élément devrait avoir flex de 1/(nombre de colonnes), si vous avez 3 colonnes de votre article doit avoir flex:1/3

    • Je ne sais pas pourquoi ce n'est pas marqué comme réponse. C'est la plus simple et la solution correcte!
    • quand je suis en train de flex: 1/2, la largeur du dernier élément plus grand que les éléments précédents, Comment pouvons-nous résoudre ce aucune idée s'il vous plaît
    • Geniussss!!! cela a fonctionné! meilleure solution de contournement jamais. Merci man, vous méritez la bonne réponse
    • fonctionne parfaitement!!!!
    • il fonctionne, tout simplement, simple et direct, merci
    InformationsquelleAutor Emilius Mfuruki
  3. 14

    Vous pouvez essayer d'obtenir la largeur actuelle de l'appareil par l'intermédiaire de Dimensions, de faire quelques calculs basés sur le nombre de colonnes que vous souhaitez afficher, moins large de la marge et de le définir comme minWidth et maxWidth.

    Par exemple:

    const {height, width} = Dimensions.get('window');
const itemWidth = (width - 15) /2;

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>
    • A couru dans la même situation et je préfère cette solution. Non seulement il est plus facile, mais il fait plus de sens puisque, finalement, nous voulons limiter le flex:1 dans le cas impair de colonnes
    • Très agréable. Merci!!!!
    • Erreur: les Types de propriété "style" sont incompatibles
    • êtes-vous à l'aide de la Machine? Si oui, cette erreur peut être liée à la Machine au lieu
    InformationsquelleAutor skyplor
  4. 0

    vérifier si le nombre d'éléments est impair, si le nombre est impair, donner un style particulier pour le dernier élément.
    par exemple)

     {this.props.count%2!= 0?
                <View style={this.props.entireList.indexOf(item) === this.props.entireList.length-1 ?stles.v1:styles.v2}></View>
 v1:{
 width:'48%'
}
v2:{
}
    InformationsquelleAutor Supriya C S
  5. 0

    La raison pour laquelle il est votre Carte de style flex: 1, donc il va essayer de développer tout l'espace qui reste.
    Vous pouvez y remédier en ajouter maxWidth: '50%' à votre style de Carte

    <View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} ></View>
    InformationsquelleAutor Tùng Nguyễn
  6. 0

    C'est la façon la plus propre au style d'une FlatList avec des colonnes et espacés de façon régulière:

        <FlatList style={{margin:5}}
        numColumns={2}                  //set number of columns 
        columnWrapperStyle={style.row}  //space them out evenly

        data={this.state.items}
        keyExtractor={(item, index) => item.id }
        renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
    />       

    const style = StyleSheet.create({
        row: {
            flex: 1,
            justifyContent: "space-around"
        }
    });
    InformationsquelleAutor jasonleonhard