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

Question

这篇文章非常接近，但我确实有不同的情况:How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines

我正在尝试像这样设置我的文本样式:为了让两种不同的文本样式换行到第二行，就像我读到的那样，我必须将它们两个换行在 <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 个单独的文本组件，一个用于黄色文本，第二个用于第一行的“你好吗”，最后一个用于“今天的感觉？”在我能够水平居中的第二行。这是一种糟糕的做事方式，我确信有一种正确的方式，但我一生都找不到它。

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

Answer 1

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

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