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

时间:2018-05-22 12:34:30

标签: javascript reactjs react-native jsx react-native-text

好的,让我们这么简单。我有两个Text组件,一个在另一个内。第一个Text的{​​{1}}为fontSize,嵌套的60的{​​{1}}为fontSize。随着字体大小的变化,嵌套的20基本对齐。我希望嵌套的Text 垂直居中对齐与父级。

代码

Text

当前输出

Current Ouput

需要输出

enter image description here

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

7 个答案:

答案 0 :(得分:5)

使用嵌套文本无法实现您的尝试。

唯一选项,使用视图包装您的文字,

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

希望它有所帮助。

答案 1 :(得分:1)

您可以将文字添加到查看

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

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

有了公认的答案,如果您的大文本足够长以跨越多行,则小文本将垂直于大文本的整个块而不是特定行居中。

因此,这是使用新功能对@Ali S答案的更新。仍然需要高度才能使嵌套文本垂直居中,因此将其设置为Big Text的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>
    );
}

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

这看起来很奇怪,但这里似乎对我有用(使用@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>
    );
}