React Native –当期望两个Text组件环绕到第二行时，如何水平居中？

Question

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

我正在尝试像这样设置文本样式，然后为了将两种不同的文本样式包装到第二行，就像我读到的那样，我不得不将其中两个文本包装在{{ 1}}容器如下：

<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> 组件容器周围添加另一个容器，但是在那里也没有找到任何成功。我能够使其工作的唯一方法是创建3个单独的文本组件，一个用于黄色文本，第二个用于第一行的“您好吗”，最后一个用于“今天的感觉？”。在第二行，我能够水平居中。这是做事的糟糕方法，我敢肯定有一种正确的方法，但是对于我的一生，我找不到它。

任何帮助将不胜感激！

Answer 1

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

这是一个包含有效代码的Expo Snack。