css - 在 React Native 中具有绝对位置的中心活动指示器
问题描述
我正在使用 View overlay 和 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'
}
推荐阅读
- amazon-web-services - 无法使用 AWS SNS 发送 SMS
- css - 如何更改 pTooltip 位置以将更长的文本视为 ui-tooltip-top
- apache - CentOS 7 中的 Apache 升级
- php - 是否可以使用 twig 模板通过 makerbundle 生成 php 文件
- kotlin - RealmLists 中只允许具体的 Realm 类。接口和抽象类都不允许
- android - 是否可以以不同的名称上传两个几乎相同的应用程序?
- android-studio - 清单合并失败的android studio
- spring-kafka - IntegrationTests 的正确@EmbeddedKafka 用法是什么?
- python - Python mmap - 缓慢访问文件末尾[带有测试代码]
- javascript - 如何在号码输入字段中以这种“xxx-xxx-xxxx”格式输入电话号码