Fonctionnalité de grille de lignes de type Bootstrap sur React Native?

Ce sera mieux si je démontre avec des images.Fonctionnalité de grille de lignes de type Bootstrap sur React Native?

C'est ce que j'essaie d'atteindre. Supposons la taille de la tablette en mode paysage. Disons que j'ai X quantité d'éléments dans le tableau. Je veux le mapper à travers la rangée jusqu'à ce qu'il ait 3 éléments dans une rangée, puis descend. Avec bootstrap, je peux faire quelque chose comme col-md-4 trois fois.

Actuellement, je me sers native-base. Il a un intéressant grid systems, mais pas exactement ce que je voulais.

C'est ce que j'ai en ce moment:

<Grid> 
    <Row> 
    { recipeStore.categories.map((category, index) => { 
     return (
     <Col key={index} style={{height: 300}}> 
      <Card> 
      <CardItem> 
       <Body> 
       <Text>{ category.name }</Text> 
       </Body> 
      </CardItem> 
      </Card> 
     </Col> 
    ) 
    })} 
    </Row> 
</Grid>

Comment puis-je obtenir l'itération de tableau pour remplir 3 colonnes puis passe à la ligne suivante?

Source

2017-08-17 Iggy

Vous pouvez utiliser flexWrap: 'wrap' sur le parent, puis utiliser flexBasis sur les enfants.

import React, { Component } from 'react'; 
import { View, StyleSheet } from 'react-native'; 

const ABox =() => <View style={styles.box} />; 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexWrap: 'wrap', 
    flexDirection: 'row', 
    paddingTop: 20, 
    }, 
    box: { 
    flexBasis: 75, 
    borderWidth: 1, 
    borderColor: 'black', 
    height: 40, 
    margin: 10, 
    } 
});

Snack: https://snack.expo.io/HkUFUp7ub

Source

2017-08-18 01:44:33 rmevans9

La meilleure façon de le faire est d'utiliser l'FlatList il est bon dans la performance et facile à utiliser. Et il est recommandé de faire une liste (voir this). De plus, vous n'avez pas besoin d'ajouter de paquet supplémentaire à votre projet. Vous pouvez facilement utiliser le FlatList comme ci-dessous:

_keyExtractor = (item, index) => index; 

    _renderItem = ({item: category}) => (
    <Card> 
     <CardItem> 
      <Body> 
      <Text>{ category.name }</Text> 
      </Body> 
     </CardItem> 
     </Card> 
); 

    render() { 
    return (
     <FlatList 
     numColumns={3} 
     data={recipeStore.categories} 
     keyExtractor={this._keyExtractor} 
     renderItem={this._renderItem} 
     /> 
    ); 
    }

Remarque: vous devez utiliser le numColumns peroperty pour définir le nombre d'éléments dans chaque ligne. Vous pouvez voir la documentation de FlatList dans here.

Source

2017-08-18 05:36:28

Fonctionnalité de grille de lignes de type Bootstrap sur React Native?

Répondre

Questions connexes