如何在React Native中实现含末行的文本整体居中?
React Native 文本块整体居中实现方案
你用textAlign="center"只能让文本在行内居中,要实现包含末行的整个文本块居中,按下面的方法调整:
- 先删掉文本内容前多余的空格,避免视觉上的偏移
- 保留
alignSelf: 'center'让Text组件本身在父容器里居中,再配合textAlign: 'center'让所有行(包括末行)在组件宽度内居中
调整后的代码:
<Text style={{ marginTop: 16, alignSelf: 'center', fontSize: 15, width: '75%', textAlign: 'center', textAlignVertical: 'center', }}> Making a luxurious lifestyle accessible for a generous group of women is our daily drive. </Text>
要是不想固定文本块宽度,想让宽度自适应内容,直接删掉width: '75%'就行,这样整个文本块会包裹内容并居中显示。
内容的提问来源于stack exchange,提问作者Vishvas Patel
相关产品推荐
相关产品推荐

