javascript - 如何将跨多行的 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 实现了 "limited style inheritance" for text这与 css 标准略有不同。例如， <Text>继承 color和'字体大小 properties only from parent正文 components, but not查看`组件。
此外， Flexbox layout React Native 的实现与 CSS 标准略有不同。
我不知道 React Native 的差异是否也会影响水平居中的换行文本。

Answer 1

您可以设置textAlign像这样的属性(property):

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

您可以查看 textAlign 的文档这里的属性(property):
https://reactnative.dev/docs/text-style-props#textalign