React Native中如何垂直居中‘Waiting for Data’文本？及布局差异解惑

嘿，我来帮你理清楚这个布局问题，顺便解答你的疑问！

一、怎么让“Waiting for Data”垂直居中？ #

问题出在你加载状态下的元素结构上：目前<Text>Waiting for Data</Text>和<ActivityIndicator>是直接作为<LinearGradient>的子元素，但没有被一个flex容器View包裹。要实现垂直居中，你需要给这两个元素套一个带居中样式的父View。

具体操作如下：

1. 先在StyleSheet里新增一个专门用来居中的样式：

centeredContainer: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
}

2. 然后修改加载状态下的JSX部分，把Text和ActivityIndicator放在这个新的View里：

{isLoading === true ? (
  <View style={styles.centeredContainer}>
    <Text style={styles.text}>Waiting for Data</Text>
    <ActivityIndicator size="large" color="white" />
  </View>
) : (...)}

其实你之前注释掉的<View style={styles.container}>思路是对的，只是styles.container没有设置居中相关的属性，换成我们新增的centeredContainer就可以了。这个容器会占满父容器的整个空间，通过justifyContent: 'center'实现垂直居中，alignItems: 'center'实现水平居中，你的文本和加载指示器就能完美居中啦。

二、为什么“Timeout”文本是居中的？ #

这是因为Timeout所在的<Text>被包裹在使用styles.container1的View里，而container1正好设置了flex: 1, justifyContent: 'center', alignItems: 'center'——这个View会占满父容器的全部空间，内部的Text自然就被居中了。

而之前的“Waiting for Data”没有这样的父容器，直接作为LinearGradient的子元素存在。虽然LinearGradient也设置了flex:1，但它的子元素是零散的Text和ActivityIndicator，React Native不会自动给这些子元素添加居中布局，它们会默认从容器顶部开始排列，自然就不会垂直居中啦。

另外顺便提一句，你原来的styles.container1里写了color: 'red', fontSize: 30，这些样式对View是无效的，因为View不支持文本相关的样式，这些属性应该只放在Text的样式里哦，不过这一点不影响布局功能~

内容来源于stack exchange