如何水平居中地将多行换行的React Native Flexbox文本居中 [英] How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines

问题描述

在React Native中，使用flexbox，我的<Text>组件中的文本在水平方向(和垂直方向)居中.

In React Native, using flexbox, text in my <Text> components are centered Horizontally (and vertically).

这按预期方式工作- 如果 文本行足够短，以致不需要需要自动换行 >移至下一行.

This works as expected -- if line of text is short enough that it does not need to wrap onto the next line.

但是，如果给定的长文本字符串跨多行自动换行，则呈现的文本不会水平居中！
而是将换行的文本对齐到左边缘.

But, when given a long text string, that wraps across multiple lines, the rendered text does not center horizontally !
Instead the wrapped text is aligned to the left edge.

如何强制将换行的文本水平居中?

How can I force wrapped lines of text to center horizontally ?

这使shortText居中居中，但longText不在居中:

This horizontally centers shortText, but not 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',
  },
});    

注意:我发现大量的堆栈溢出问题/答案和博客文章
垂直居中，水平居中，当文本没有不换行到多条行"上时.
但是我一直找不到能将水平文本居中包装到多行的任何内容.

Note: I find plenty of Stack Overflow questions/answers, and blog posts
for Vertical centering, and Horizontal centering when the text does Not wrap onto multiple "lines".
But I have been unable to find any for centering horizontal text that wraps to multiple lines.

也:请注意，React Native实现了"limited样式继承" ，与CSS标准略有不同.例如，<Text>继承了color和'fontSize properties only from parent Text components, but not View`组件.
另外，React Native的 Flexbox布局实现与CSS略有不同标准.
我不知道React Native的差异是否也会影响水平居中的包装文本.

Also: note that React Native implements "limited style inheritance" for text which differs slightly from the css standard. For example, <Text>inherits color and 'fontSizeproperties only from parentTextcomponents, but notView` components.
Also, the Flexbox layout implementation for React Native differs slightly from the CSS standard.
I don't know if React Native differences affect horizontally centered wrapped text as well, or not.

推荐答案

您可以这样设置textAlign属性:

<Text style={{textAlign: 'center'}}>centered Text</Text>

您可以在他们的文档中看到所有可用的属性: https://facebook.github.io/react-native/docs/text .html#style

You can see all the available properties in their docs: https://facebook.github.io/react-native/docs/text.html#style

这篇关于如何水平居中地将多行换行的React Native Flexbox文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！