时间戳

首页 > 解决方案 > 嵌套文本，垂直对齐不起作用 - React Native

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

问题描述

好的，让我们把这个简单化。我有两个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>
        );
    }
}

电流输出

当前输出

需要的输出

在此处输入图像描述

我知道这是一个简单的场景，但是作为反应原生的新手，我想不通。我已经搜索了整个网络，但找不到任何有用的资源。

标签： javascriptreactjsreact-nativejsxreact-native-text

解决方案

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

唯一选项，使用视图来包装您的文本，例如，

<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'/>

希望能帮助到你。

推荐阅读