如何水平居中 React Native Flexbox 文本，该文本环绕多行

Question

在 React Native 中，使用 flexbox，在我的 <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>继承color和 'fontSize properties only from parentText components, but notView` 组件。
此外，React Native的Flexbox 布局实现与 CSS 标准略有不同。
我不知道 React Native 的差异是否也会影响水平居中的换行文本。

Answer 1

您可以textAlign像这样设置属性：

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

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