Space between components in React Native styling

问题:

I have 6 View components (shown in the picture) , I want to have space between all 6 View components.

My 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>

回答1:

Try to add padding to the element then and another blank view in each row, padding make space between each item

<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>

回答2:

You can simply add margins to the elements and it will work fine.

<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:

you have 2 solutions in this case

first, use margin/padding for make air between flex element

and the other way is set justifyContent to 'space-between' || 'space-around'

but you must know about some information to use the best solution in a different case

1- (margin-padding)

in some case (more case), padding better margin

as you know, if we have a box ( means element ), you have two space,

first between content and border [ Inner space ]

second, space between the border and another foreign box element [ outer space ]

if you have an element and you want move element in your style you must use margin, because if you use padding for your element, inner space changed and in many cases, this approach creates some crash in your element, {{ if you want to use padding you must create one View and wrap all of your element and set the padding for a wrapper for you }}

and if you want to use space-between || space-around, you must know this, space-between and space-around have one diff

in space-between, space produced between elements and not create space between your element with sides

and space-around set space with elements and with sides

回答4:

You can add the following in your style:

attachcontainer{
   flexDirection:  'row',
   justifyContent: 'space-between'
}

回答5:

        <View style={{flex:2,flexDirection:"row",flexWrap: 'wrap'}}>
            <View style={{backgroundColor:'white',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>
            <View style={{backgroundColor:'black',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>

        </View>

        <View style={{flex:2,flexDirection:"row",flexWrap: 'wrap'}}>
            <View style={{backgroundColor:'gray',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>
            <View style={{backgroundColor:'yellow',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>

        </View>