React Native——当两个文本组件换行到第二行时如何水平居中？

Question

这篇文章非常接近，但我确实有不同的情况：How to Horizo​​ntally 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标签上，你的styleprop 应该是style={{textAlign: "center"}}而不是style={textAlign="center"}。

这是带有工作代码的Expo Snack。