React Native中如何增大纵向排列的Text组件间距？

下面提供几种实用方法来增大Text组件之间的纵向间距：

方法一：给单个Text组件添加间距样式 #

直接给每个Text定义包含marginBottom的样式，精准控制间距大小：

const CustomInput = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.labelText}>Book Titles</Text>
      <Text style={styles.labelText}>Genre</Text>
      <Text style={styles.labelText}>Author</Text>
      <Text style={styles.labelText}>Number of pages</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    width: '100%',
    height: '50%',
    borderColor: '#e8e8e8', // 修正原代码拼写错误：英式borderColour → 美式borderColor
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginVertical: 5,
  },
  labelText: {
    marginBottom: 15, // 自定义间距大小
    // 若最后一个Text不需要底部间距，可单独设置：<Text style={{...styles.labelText, marginBottom: 0}}>...</Text>
  }
});

export default CustomInput;

方法二：利用容器布局属性均匀分配间距 #

如果希望Text在容器内均匀分布，给容器添加justifyContent属性：

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    width: '100%',
    height: '50%',
    borderColor: '#e8e8e8',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginVertical: 5,
    justifyContent: 'space-between', // 组件均匀分布，上下边缘对齐容器
    // 或使用justifyContent: 'space-around'，组件周围保留相等空间
    paddingVertical: 10, // 可选：避免Text贴容器上下边缘
  },
});

方法三：用View包裹每个Text设置间距 #

适合需要搭配其他组件的复杂布局场景：

const CustomInput = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textWrapper}>
        <Text>Book Titles</Text>
      </View>
      <View style={styles.textWrapper}>
        <Text>Genre</Text>
      </View>
      <View style={styles.textWrapper}>
        <Text>Author</Text>
      </View>
      <View style={styles.textWrapper}>
        <Text>Number of pages</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    width: '100%',
    height: '50%',
    borderColor: '#e8e8e8',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginVertical: 5,
  },
  textWrapper: {
    marginBottom: 15,
  }
});

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