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

问题: This post is very close but I do have a different situation: How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines I am trying to style my...

问题:

This post is very close but I do have a different situation: How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines

I am trying to style my text like this: enter image description here and in order to get the two different text styles to wrap to a second line like that I read I had to wrap the two of them in a <Text> container like so:

<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>

This worked and lets the second text components wrap under the first one. HOWEVER, it refuses to center itself horizontally on the second line. I tried adding another container around the greater <text> component container but did not find any success there either. The only way I was able to make it work was with creating 3 separate text components, one for the yellow text, a second for "How are you" on the first line and a final one for the "feeling today?" on the second line which I was able to center horizontally. This is an awful way to do things and I'm sure there is a right way but for the life of me I cannot find it.

Any help would be greatly appreciated!


回答1:

On your first Text tag your style prop sould be style={{textAlign: "center"}} instead of style={textAlign="center"}.

Here's an Expo Snack with working code.

  • 发表于 2019-03-06 03:43
  • 阅读 ( 208 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除