React Native中如何为View组件的所有子元素设置统一间距

方案1：使用gap属性（推荐，适配React Native 0.71及以上版本） #

React Native从0.71版本开始全面支持Flex布局的gap系列属性，直接控制同容器内子元素的间距，不会在容器首尾产生多余边距，无需额外处理子元素样式。

你只需要在原有screen样式中新增gap属性即可：

const styles = StyleSheet.create({
  screen: {
    maxWidth: '80%',
    width: 200,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
    // 新增属性：默认flexDirection为column时，控制垂直方向子元素间距为30
    gap: 30
  },
})

方案2：子元素统一加边距（兼容所有React Native版本） #

如果你的项目React Native版本低于0.71，无法使用gap属性，可以通过给子元素加统一边距、再单独处理首尾多余边距的方式实现：

• 给所有子元素加marginBottom: 30，再给最后一个子元素单独设置marginBottom: 0
• 或给所有子元素加marginTop: 30，再给第一个子元素单独设置marginTop: 0

示例代码如下：

return (
    <Card style={styles.screen}>
      <Text style={styles.childItem}>...</Text>
      <Text style={styles.childItem}>...</Text>
      <Button style={[styles.childItem, styles.lastChild]} title='...' onPress={...} />
    </Card>
  )

const styles = StyleSheet.create({
  screen: {
    maxWidth: '80%',
    width: 200,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  childItem: {
    marginBottom: 30
  },
  lastChild: {
    marginBottom: 0
  }
})

内容的提问来源于stack exchange，提问作者Ahmed Shaikh