在React Native中,使用flexbox,我
这按预期工作——如果文本行足够短,不需要换行到下一行。
但是,当给定一个跨越多行的长文本字符串时,呈现的文本并没有水平居中!相反,换行的文本被对齐到左边缘。
如何强制换行文本水平居中?
这将水平居中
注意:我发现很多Stack Overflow的问题/答案和博客文章都是关于垂直居中和水平居中的,但是当文本不换行时。但是我找不到任何关于水平居中换行文本的内容。
另外请注意,React Native实现了"有限的文本样式继承", 与css标准略有不同。例如,
<Text>
组件中的文本会水平(和垂直)居中。这按预期工作——如果文本行足够短,不需要换行到下一行。
但是,当给定一个跨越多行的长文本字符串时,呈现的文本并没有水平居中!相反,换行的文本被对齐到左边缘。
如何强制换行文本水平居中?
这将水平居中
shortText
,但不适用于longText
:import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
class Deck extends React.Component {
render() {
const shortText = 'Centered!';
const shortText = 'This very long line of text does NOT Center. Instead the wrapped text is aligned to the left edge of the container.';
return (
<View style={styles.container}>
<View>
<Text style={styles.titleText}> {shortText} </Text>
<Text style={styles.titleText}> {longText} </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 27,
flexWrap: 'wrap',
alignSelf: 'center',
},
});
注意:我发现很多Stack Overflow的问题/答案和博客文章都是关于垂直居中和水平居中的,但是当文本不换行时。但是我找不到任何关于水平居中换行文本的内容。
另外请注意,React Native实现了"有限的文本样式继承", 与css标准略有不同。例如,
<Text>
仅从父Text
组件继承color
和fontSize
属性,而不从View
组件继承。此外,React Native的Flexbox布局实现与CSS标准略有不同。我不知道React Native的差异是否也会影响水平居中的换行文本。
textAlign: "center"
添加到<Text>
的样式属性中是否起作用? - CRice