React Native嵌套Text组件垂直居中对齐问题求助

嘿，作为React Native新手遇到这个问题太正常了！嵌套Text默认的基线对齐确实不符合我们直观的居中需求，我之前也踩过这个坑，给你分享两个靠谱的解决方案：

方案一：用verticalAlign + lineHeight快速搞定 #

直接给子Text设置和父Text fontSize相同的lineHeight，再加上verticalAlign: 'middle'，就能让子Text和父Text垂直居中对齐：

// @flow
import React, { Component } from 'react';
import { Text } from 'react-native';

type PropTypes = {}

export default class SampleVC extends Component<PropTypes> {
  render() {
    return (
      <Text style={{ fontSize: 60 }}>
        Big Text
        <Text style={{ fontSize: 20, verticalAlign: 'middle', lineHeight: 60 }}>Small Text</Text>
      </Text>
    );
  }
}

原理是：父Text的字号是60，把子Text的行高设为和父字号一致，再通过verticalAlign: 'middle'让子Text在这个行高范围内垂直居中，完美匹配父Text的垂直中心。

方案二：相对定位+transform，通用适配所有字号 #

如果以后父/子字号有变化，不想手动改lineHeight，可以用相对定位的方式，不管字号多少都能自动居中：

// @flow
import React, { Component } from 'react';
import { Text } from 'react-native';

type PropTypes = {}

export default class SampleVC extends Component<PropTypes> {
  render() {
    return (
      <Text style={{ fontSize: 60 }}>
        Big Text
        <Text style={{ 
          fontSize: 20,
          position: 'relative',
          top: '50%',
          transform: [{ translateY: -50% }]
        }}>Small Text</Text>
      </Text>
    );
  }
}

这个方法的核心是：先通过top: '50%'把Text的顶部移动到父元素的垂直中点，再用translateY(-50%)把自身向上偏移一半高度，最终实现完美居中，完全不用关心具体的字号数值。

小科普：为什么默认是基线对齐？ #

这是因为React Native的Text组件遵循传统文本排版的基线对齐规则，就像网页里的inline元素一样，嵌套的文本会默认和父文本的基线对齐，这是排版行业的标准，但有时候确实不符合我们的视觉需求，所以需要手动调整。

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