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

从 React Native 0.71.0 开始，您可以使用gap属性。这些子视图每行/列之间将有 10 个像素的间隙。

<View style={{flexDirection:'column', gap: 10 }}>
  <View />
  <View />
  <View />
  <View />
  <View />
  <View />
</View>

Answer 2

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

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

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

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

如果您使用该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 网格中的间隙的效果。

Answer 5

更新：截至react-native 0.71.0您可以直接在样式中使用间隙属性请参阅： https: //reactnative.dev/blog/2023/01/12/version-071#simplifying-layouts-with-flexbox-gap

尝试这个

const Component = () => {
  return (
    <View style={styles.container}>
      <View style={styles.child}></View>
      <View style={styles.child}></View>
    </View>
  );
};

// Gap you want to achieve
const gap = 8;

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    paddingHorizontal: (gap / -2),
  },
  child: {
    marginHorizontal: gap / 2,
  },
});