React Native中Flexbox文本无法居中的问题求助

你的代码问题主要有两个点：

• React Native 里的 <View> 默认就是 Flexbox 布局，不需要手动设置 display: "flex"，这个属性在 RN 的样式体系里不生效，写了也是多余的。
• 垂直居中（justify-content: "center"）需要容器有足够的高度，如果你的 View 只是刚好包裹文本的高度，垂直方向没有多余空间，自然看不出居中效果。

给你两种常用的修改方案：

方案1：让容器占满父容器高度（最常用） #

如果想让文本在整个可用空间里居中，给 View 加上 flex: 1，这样它会自动占满父容器的剩余空间：

<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
  <Text>{selected_order_date} {selected_order_time}</Text>
</View>

方案2：给容器设置固定高度 #

如果只需要在固定高度的容器里居中，直接指定高度即可：

<View style={{ height: 200, alignItems: "center", justifyContent: "center" }}>
  <Text>{selected_order_date} {selected_order_time}</Text>
</View>

另外补充：如果只需要水平居中，不需要 justify-content: "center"，只保留 alignItems: "center" 就行，哪怕容器没有高度也能生效。

内容的提问来源于stack exchange，提问作者Eldan Shkolnikov