javascript - 嵌套文本，垂直对齐不起作用 - React Native

Question

好的，让我们简单点。我有两个 Text 组件，一个在另一个里面。第一个 Text 的 fontSize 为 60，嵌套的 fontSize 为 20。随着字体大小的变化，嵌套的 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 }}>Small Text</Text>
            </Text>
        );
    }
}

当前输出

需要输出

我知道这是一个简单的场景，但作为 React Native 的新手，我无法弄明白。我在网上搜索过，但找不到任何有用的资源。

Answer 1

仅使用嵌套文本不可能实现您正在尝试的目标。

唯一的选择，使用 View 来包装您的文本，例如，

<View style={{ flexDirection: 'row', alignItems: 'center' }} >
  <Text style={{ fontSize: 60 }}>Big Text</Text>
  <Text style={{ fontSize: 20 }}>Small Text</Text>
</View>

如果您想经常使用它，请为上面的内容创建您自己的自定义组件，

function CustomNextedText (props) {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }} >
      <Text style={{ fontSize: 60 }}>{props.bigText}</Text>
      <Text style={{ fontSize: 20 }}>{props.smallText}</Text>
    </View>
  );
}

像任何其他 react-native 组件一样在任何地方使用它，

 <CustomNextedText bigText='Big Text' smallText='Small Text'/>

希望对您有所帮助。