在 React Native 中具有绝对位置的中心 Activity 指示器

Question

我正在使用 View overlay 和 ActivityIndicator 在后台隐藏加载地图。我使用的解决方案是具有绝对位置的视图，使其位于所有内容之上，并将 activityindicator 置于顶部，因此发生了一些事情。问题是，由于无法将 ActivityIndiator 大小设置为 iOS 上的特定像素，我不知道它的大小是多少，因此我无法将其正确居中。或者我没有想出办法。

这是一些代码：

<View style={styles.whiteOverlay}>
      <ActivityIndicator style={styles.indicator} size="large" color={colors.color4} />
 </View>

 whiteOverlay: {
        width: screen.height,
        height: screen.height,  
        backgroundColor: 'white',
        position: 'absolute',     
        zIndex: 20        
    },
    indicator: {
        zIndex: 21,
        position: 'absolute',
        left: screen.width/2,
        top: screen.height/2        
    }

这会使指示器偏离中心。我可以在其中放置一些神奇数字，使其适用于特定设备，猜测指示器的大小，但它不适用于其他设备。感谢您的帮助。

Answer 1

如果你想让ActivityIndicator在屏幕上居中，可以这样设置样式。

      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", zIndex: 20 }}>
        <ActivityIndicator
          size="large" color={colors.color4}
        />
      </View>

或者你可以使用样式的position

      <View style={styles.whiteOverlay}  >
        <ActivityIndicator
          size="large" color={colors.color4} 
        />
      </View >
...
 whiteOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'      
 }

Answer 2

情侣选项；

非 Flex

whiteOverlay: {
   width: screen.height,
   height: screen.height,  
   backgroundColor: 'white',
   position: 'absolute',
   zIndex: 20        
},
indicator: {
   zIndex: 21,
   position: 'absolute',
   left: 50%,
   top: 50%,
   transform: translate(-50%, -50%)
}

WITH-Flex（假设指示器呈现为叠加层的子项）；

whiteOverlay: {
   width: screen.height,
   height: screen.height,  
   backgroundColor: 'white',
   position: 'absolute',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   zIndex: 20        
}

在 React Native 中具有绝对位置的中心 Activity 指示器

Center Activity Indicator with absolute position in React Native

css

react-native

activity-indicator