好的,让我们这么简单。我有两个Text
组件,一个在另一个内。第一个Text
的{{1}}为fontSize
,嵌套的60
的{{1}}为fontSize
。随着字体大小的变化,嵌套的20
基本对齐。我希望嵌套的Text
垂直居中对齐与父级。
代码
Text
当前输出
需要输出
我知道这是一个简单的场景,但作为一个新的反应原生,我无法弄明白。我在网上搜索过,但找不到任何有用的资源。
答案 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>
);
}