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

Question

好的，让我们简单点。我有两个Text部分，一个在另一个内部。第一个Text具有fontSizeof 60，而嵌套的具有fontSizeof 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>
        );
    }
}

电流输出

所需输出

我知道这是一个简单的场景，但是作为本机响应的新​​功能，我无法弄清楚。我在网上搜索了所有内容，但找不到任何有用的资源。

Answer 1

仅使用嵌套文本无法实现您要尝试的功能。

唯一选项，使用“视图”将您的文本包装起来，

<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>
  );
}

像其他任何反应本机组件一样在任何地方使用它，

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

希望能帮助到你。