React Native——如何在期望两个文本组件换行到第二行时将它们水平居中？

Question

这个post非常接近，但我确实有不同的情况：

我正在尝试像这样设置我的文本样式：为了让两种不同的文本样式换行到第二行，就像我读到的那样，我不得不将它们中的两个换行<Text> 像这样的容器：

<Text style={textAlign="center"}>
   <Text style={[ {color: colors.mustardYellow, fontSize: 30, textAlign:"center"}, textStyles.Bold]}>Hey! </Text>
   <Text style={[ {color: colors.white, fontWeight: "100", fontSize: 30, textAlign:"center"}]}>How are you feeling today?</Text>
</Text>

这有效，让第二个文本组件换行在第一个文本组件下。但是，它拒绝在第二行水平居中。我尝试在更大的 <text> 组件容器周围添加另一个容器，但也没有找到任何成功。我能够让它工作的唯一方法是创建 3 个单独的文本组件，一个用于黄色文本，第二个用于第一行的 "How are you"，最后一个用于第二行的 "feeling today?"我能够水平居中的线。这是一种糟糕的做事方式，我确信有一个正确的方法，但我一生都找不到它。

如有任何帮助，我们将不胜感激！

Answer 1

在您的第一个 Text 标签上，您的 style 属性应该是 style={{textAlign: "center"}} 而不是 style={textAlign="center"}。

这是一个 Expo Snack 的工作代码。

React Native——如何在期望两个文本组件换行到第二行时将它们水平居中？

React Native -- how to horizontally center two Text components when expecting them to wrap to a second line?

css

react-native

react-native-stylesheet