1
votes

2 colonnes en React Native

J'essaye de créer 2 colonnes contenant des boutons, j'ai essayé avec flex direction 'row' mais c'est arrivé

elle devrait ressembler à ceci

est là une autre façon de le faire?

var rows = [], columns = [];
var i = 0;

buttons.forEach((e, idx) => {
    rows.push(e);
    i++;

    if (i === 2 || idx === buttons.length - 1) {
        i = 0;
        columns.push(
            <View key={ idx } style = {{ flex: 1, flexDirection: 'row' }}>
                { rows }
            </View>
        );
        rows = [];
        i = 0;
    }
});

return (
    <View style = {{ flex: 1, margin: normalize(20) }} >
        { columns }
    </View>
);

javascript reactjs react-native flexbox

0 commentaires

4 Réponses :

0
votes

Vous pouvez utiliser une FlatList pour cela.

Voici comment afficher une grille 2x2, vous devrez l'adapter pour accueillir vos boutons.

<FlatList
  data={[1, 2, 3, 4]}
  numColumns={2}
  renderItem={() => (
    <View style={{ 
      flex: 1,
      height: 150,
      borderWidth: 1,
      margin: 20
    }}/>
  )}
/>

0 commentaires

1
votes

Vous pouvez le styliser comme ci-dessous:

<View>
  <View style={{flexDirection:'row'}}>
   <Button1View/> // Break
   <Button2View/> // Meeting
  </View>
  <View style={{flexDirection:'row'}}>
   <Button3View/> // on the way
   <Button4View/> // office
  </View>
</View>

vous pouvez ajouter des styles dans les vues et les boutons en conséquence, mais cela arrangera les boutons comme vous le souhaitez

2 commentaires

J'ai donc poussé mes boutons depuis l'API et je ne veux pas coder ça en dur, comment faire?

Vous voulez dire que votre disposition de grille sera dynamique? Vous ne saurez pas à l'avance que comment devra arranger les images?

1
votes

You can use **GRID** component 
<Grid
    renderItem={() => (
        <View style={{ 
          flex: 1,
          height: xx,
          borderWidth: 1,
          margin: xx
        }}/>
      )}
    data={[arrayData]}
    itemsPerRow={2}
/>
Please check this documentation.
react-native-grid-component

0 commentaires

0
votes

J'avais l'habitude de résoudre ce problème en utilisant flexDirection et la hauteur et la largeur données au contenu

dans la question ci-dessus peuvent être résolues comme ceci

<View>
    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>

    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>
<View>

1 commentaires

J'ai mes boutons de l'API et je ne veux pas coder en dur comme ça, est-il possible de le faire?