React Native开发中如何实现文本在自身容器内垂直居中

问题根因 #

justifyContent、alignItems属于Flex容器属性，仅对开启了Flex布局的容器组件（如View）生效，你将这两个属性写在Text文本组件上不会产生任何效果，因此文字无法实现垂直居中。

解决方案 #

这里提供两种可直接复用的实现方案：

方案1：外层嵌套View实现居中（双端兼容性最好，样式一致性高）

调整后的JSX代码：

<View style={styles.formContainer}>
  <View style={styles.textInputBackground}>
    <View style={styles.textInputLabelWrap}>
      <Text style={styles.textInputLabelText}>Name</Text>
    </View>
    <TextInput style={styles.textInput} />
  </View>
  <View style={styles.textInputBackground}>
    <View style={styles.textInputLabelWrap}>
      <Text style={styles.textInputLabelText}>Email</Text>
    </View>
    <TextInput style={styles.textInput} />
  </View>
</View>

调整后的样式代码：

const styles = StyleSheet.create({
  formContainer: {
    marginTop: 130,
  },
  textInputBackground: {
    marginTop: 12,
    backgroundColor: 'rgba(0, 0, 0, 0.08)',
    flexDirection: 'row',
    height: 46,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 8,
  },
  // 新增Text外层容器样式，负责居中布局
  textInputLabelWrap: {
    flex: 2,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInputLabelText: {
    color: 'red',
  },
  textInput: {
    flex: 12,
  },
})

方案2：直接设置行高实现（无需修改结构，代码更精简）

不需要修改JSX结构，仅调整textInputLabelText样式即可：

textInputLabelText: {
  backgroundColor: 'blue',
  color: 'red',
  textAlign: 'center',
  flex: 2,
  // 行高和父容器高度保持一致，即可实现文字垂直居中
  lineHeight: 46
},

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