web-dev-qa-db-fra.com

Espace entre les composants dans le style React Native

 enter image description here

J'ai 6 composants View (illustrés dans l'image), je souhaite disposer d'un espace entre tous les 6 composants View. 

Mon code:

<View style={{flexDirection:'column',flex:6}}>
            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'red',flex:1}}>
                </View>
                <View style={{backgroundColor:'blue',flex:1}}>
                </View>
            </View>


            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'white',flex:1}}>
                </View>
                <View style={{backgroundColor:'black',flex:1}}>
                </View>

            </View>

            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'gray',flex:1}}>
                </View>
                <View style={{backgroundColor:'yellow',flex:1}}>
                </View>

            </View>


 </View>
reactjsgridviewreact-nativeflexbox
7
Behdad Ahmadi

Essayez d’ajouter un remplissage à l’élément puis une autre vue vierge dans chaque ligne, le remplissage crée un espace entre chaque élément.

 enter image description here 

<View style={{
      flexDirection:'column',
      flex:1,
    }}>
        <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
            <View style={{backgroundColor:'red',flex:2,padding:'10'}}>
            </View>
          <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'blue',flex:2,padding:'10'}}>
            </View>
        </View>

        <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
            <View style={{backgroundColor:'white',flex:2,padding:'10'}}>
            </View>
            <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'black',flex:2,padding:'10'}}>
            </View>
      </View>
      <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
            <View style={{backgroundColor:'gray',flex:1,padding:'10'}}>
            </View>
            <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'yellow',flex:1,padding:'10'}}>
            </View>
        </View>

16
Maulana Prambadi

Vous pouvez simplement ajouter des marges aux éléments et cela fonctionnera très bien .  enter image description here 

<View style={{flexDirection:'column',flex:6}}>
  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'red',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'blue',flex:1, marginLeft: 5}}>
    </View>
  </View>


  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'white',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'black',flex:1, marginLeft: 5}}>
    </View>
  </View>

  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'gray',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'yellow',flex:1, marginLeft: 5}}>
    </View>
  </View>
</View>

3
Tarik Fojnica

vous avez 2 solution dans ce cas

première utilisation marge/remplissage pour rendre l'air entre l'élément flexible

et l’autre façon est de justifier le contenu de 'espace-entre' || 'espace-aroun'

mais vous devez connaître certaines informations pour utiliser la meilleure solution dans différents cas

1- (marge de remplissage)

dans certains cas (plus de cas), rembourrage meilleure marge 

comme vous maintenant, si nous avons box (moyens element), vous avez deux espace, 

premier entre contenu et bordure [Espace intérieur] 

deuxièmement, l'espace entre la bordure et un autre élément de boîte étrangère [espace extérieur]

si vous avez un élément et que vous voulez déplacer un élément dans votre style, vous devez utiliser margin, car si vous utilisez un padding pour votre élément, l'espace interne change et dans de nombreux cas, cette approche crée un crash dans votre élément, {{si vous vous souhaitez utiliser le remplissage, vous devez créer une vue, envelopper tout votre élément et définir le remplissage pour le wrapper pour vous}} 

et si vous voulez utiliser space-betwwen || espace-autour, vous devez savoir ceci, espace-entre et espace-autour ont un diff 

dans l'espace-entre, l'espace produit entre les éléments et ne crée pas d'espace entre votre élément avec les côtés 

et espace autour de l'espace défini avec des éléments et des côtés

0
hamidreza nikoonia