React Native样式中组件之间的空间

Question

我有6个View组件（如图所示），我想在所有6个View组件之间留出空间。

我的代码：

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

Answer 1

尝试在元素中添加填充，然后在每行中添加另一个空白视图，填充在每个项目之间留出空间

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

Answer 2

您可以简单地为元素添加边距，它可以正常工作。

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

Answer 3

attachcontainer {flexDirection：'row'，justifyContent：'space-between'}

添加你的风格

Answer 4

在这种情况下你有2个解决方案

首先，使用margin / padding在flex元素之间制作空气

另一种方法是将justifyContent设置为'space-between'|| “太空飞”

但您必须了解一些信息才能在不同情况下使用最佳解决方案

1-（边距填充）

在某些情况下（更多情况），填充更好的边距

如你所知，如果我们有一个盒子（手段元素），你有两个空间，

内容和边界之间的第一个[内部空间]

第二，边界和另一个外国盒子元素之间的空间[外层空间]

如果你有一个元素，并且你想在你的风格中使用移动元素你必须使用边距，因为如果你对元素使用填充，内部空间发生了变化，在很多情况下，这种方法会在元素中造成一些崩溃，{{if if want to使用填充你必须创建一个视图并包装你的所有元素并为你设置包装填充}}}

如果你想在||之间使用空格空间，你必须知道这一点，空间和空间有一个差异

在空间之间，元素之间产生的空间，而不是在元素与边之间创造空间

和空间设置空间与元素和侧面