css - 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 个单独的文本组件，一个用于黄色文本，第二个用于第一行的“你好吗”，最后一个用于“今天的感觉？” 在我能够水平居中的第二行上。这是一种糟糕的做事方式，我确信有正确的方式，但对于我的生活，我找不到它。

任何帮助将不胜感激！

标签： cssreact-nativereact-native-stylesheet

Answer 1

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

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