中心活动指示器，在React Native中具有绝对位置

debugcn 发表于 Dev

宇宙性癫痫发作

我正在使用View overlay和ActivityIndicator隐藏背景中的加载地图。我正在使用的解决方案是使用具有绝对位置的View将其置于一切之上，并将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        
    }

这会使指示器偏离中心位置。我可以在其中放一些魔术数字，以使其适用于特定设备，猜测指示器的大小，但随后在其他设备上不起作用。谢谢你的帮助。

洪开发人员

如果要在屏幕上居中显示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'      
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。