嵌套文本，垂直对齐无效 - React Native

Question

好的，让我们简化一下。我有两个

代码

// @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，我无法想出解决方法。我已经在网上搜索了所有资源，但没有找到任何有用的资源。

- theapache64

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

像使用其他React Native组件一样，在任何地方都可以使用它，

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

希望它有帮助。

- Ravi Raj

---

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

太遗憾了，这意味着你不能同时为兄弟“Text”组件设置共享颜色和对齐方式？ - cglacet

Answer 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 SabziNezhad

---

谢谢 @Ali Sn - theapache64

Answer 3

你还可以定义小文本的行高以匹配大文本：

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

- Daniel Givoni

Answer 4

自从React-Native v0.63版本以后，您可以在<Text/>内部渲染<View/>，而无需为View提供明确的尺寸发布说明。

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

因此，这里是对@Ali S的答案使用新功能的更新。仍然需要设置高度以便垂直居中嵌套文本，因此将其设置为Big Text的字体大小。宽度可以省略，因此现在小文本的长度可以是动态的。

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

- JDune

Answer 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 Rathod

---

很抱歉，Nirmalsinh，它不起作用。我想让文本嵌套，这可行吗？ - theapache64

你为什么从上面复制？ - Manoj Kashyam

Answer 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>

- Alby

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

- cglacet