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

如果您使用 map 函数来渲染组件，您可以尝试以下代码：

// Change to the number of columns in your grid
const numCols = 4;

// Change to the spacing for each item
const spacing = '1.25rem';

// Parent View
<View style={{
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
>
{// List of child views to render
contents.map((content, index) => (
    // add a margin of 'spacing' to the bottom of all cards
    // will supply a left-margin to all cards in between the gap,
    // everytime a card is NOT divisible numCols, add a margin to the left
    <View style={{
      marginBottom : spacing,
      marginLeft: index % numCols !== 0 ? spacing : 0 
    }}
    >
    <Card 
      key={index}
      content={content}
      />
    </View>
  ))
}
</View>

我发现使用以下代码片段会在 css 网格中创建类似于 gap 的效果。

Answer 4

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

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

另一种方法是将justifyContent设置为'space-between'|| '空间不要蜘蛛'

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

1-（margin-padding）

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

就像你现在一样，如果我们有框（表示元素），你有两个空格，

首先在内容和边界之间[内部空间]

第二，边框和另一个外部框元素[外部空间]之间的空格

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

如果你想使用space-betwwen ||空间，你必须知道这一点，空间和空间有一个差异

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

和空间环绕设置空间，包含元素和边

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

Answer 6

为父容器（块/视图）提供以下样式。

  justifyContent: 'space-around'

或

  justifyContent: 'space-between'

Space-around 将在所有元素/视图/项目之间放置空间，并为边框添加空间。与所有元素获得边距相同。并且 space-between 将在所有项目之间放置空间，而不会给边框添加空间所有这些东西都在这里得到了很好的解释。 Here is the link

Answer 7

附件容器{ flexDirection：'行'， justifyContent：“之间的空间” }

添加您的风格

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

7 个答案: