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

Posted 2023-02-21

【中文标题】嵌套文本，垂直对齐不起作用 - React Native

【英文标题】：Nested Text, Vertical Align not working - React Native

【发布时间】：2018-11-01 05:34:33

【问题描述】：

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

电流输出

需要的输出

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

【参考方案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>
  );

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

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

希望对你有帮助。

【讨论】：

是的。我只是想知道是否可以仅使用嵌套文本。无论如何，非常感谢您的回复。

太可悲了，这意味着您不能同时为兄弟Text 组件共享颜色和对齐方式？

【参考方案2】：

您可以在视图中包装嵌套文本，但嵌套视图必须具有宽度和高度。如果您对此约束没有任何问题，这是一个很好的解决方案。

<Text style= fontSize: 60 >
      Big Text
      <View style= height:40, width:100, justifyContent: 'center', alignItems: 'center' >
            <Text style= fontSize: 20 >Small Text</Text>
      </View>
</Text>

【讨论】：

谢谢@Ali Sn

【参考方案3】：

您还可以定义 smallText lineHeight 以匹配 bigText：

render() 
    return (
        <Text style= fontSize: 60 >
            Big Text
            <Text style= fontSize: 20, lineHeight:60 >
                Small Text
            </Text>
        </Text>
    );

【参考方案4】：

从 React-Native v0.63 开始，您可以在 <Text/> 内渲染 <View/>，而无需为视图提供明确的尺寸。 Release Notes

通过接受的答案，如果您的大文本足够长以跨越多行，那么小文本将垂直居中于整个大文本块，而不是特定行。

因此，这是使用新功能对 @Ali S 的回答进行的更新。为了使嵌套文本垂直居中，仍然需要高度，因此将其设置为大文本的 fontSize。宽度可以省略，所以小文本的长度现在可以是动态的。

function BigSmallText(props) 
    let bigFontSize = 40;
    return (
        <Text
            style=
                fontSize: bigFontSize,
                lineHeight: bigFontSize,
            >
            A very long sentence that spans multiple lines
            <View
                style=
                    flexDirection: 'row',
                    alignItems: 'center',
                    height: bigFontSize,
                >
                <Text
                    style=
                        fontSize: 14,
                        paddingLeft: 10,
                    >
                    SMALL TEXT
                </Text>
                <Text
                    style=
                        fontSize: 6,
                        paddingLeft: 10,
                    >
                    TINY TEXT
                </Text>
            </View>
        </Text>
    );

【参考方案5】：

您可以将两个文本添加到视图中。

<View style=alignItems: 'center', justifyContent: 'center'>
       <Text style= fontSize: 60, height:'100%' >Big Text</Text>                
       <Text style= fontSize: 20, height:'100%' >Small Text</Text>
</View>

【讨论】：

抱歉 Nirmalsinh，它不起作用。我希望文本被嵌套。有可能吗？

为什么要从上面复制？

【参考方案6】：

< View style=flexDirection:'column'>


    <View style=alignContent:'center'>

        <Text style=fontSize:60>props.bigText</Text>

    </View>

    <View style=alignContent:'center' >

        <Text style=fontSize:20>props.smallText</Text>

     </View>

< /View>

【参考方案7】：

这看起来很奇怪，但是这似乎对我有用（使用@Ali SabziNezhad 的suggestion）。它允许共享文本道具（如color）和对齐（在这种特殊情况下为center）

function Component() 
    return (
        <CenterText style=color: 'red'>
            Centered <Text style=fontSize: 50>text</Text>
        </CenterText>
    );

export function CenterText(children, ...otherProps: Text['props']) 
    return (
        <Text ...otherProps>
            <View 
                style=flexDirection: 'row', alignItems: 'center' 
                children=children 
            />
        </Text>
    );

我们可以有一个更通用的对齐文本组件：

export function AlignedText(children, alignItems, ...otherProps: AlignedTextProps) 
    return (
        <Text ...otherProps>
            <View 
                style=flexDirection: 'row', alignItems: alignItems 
                children=children 
            />
        </Text>
    );


type Alignment = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
type AlignedTextProps = Text['props'] & alignItems: Alignment;

然后我们可以使用它来定义CenterText：

export function CenterText(props: TextProps) 
    return <AlignedText alignItems='center' ...props />;

或直接为：

function Component() 
    return (
        <AlignedText style=color: 'red' alignItems='center'>
            Centered <Text style=fontSize: 50>text</Text>
        </AlignedText>
    );