在React Native的SafeAreaView中具有绝对位置的视图
丹丹宁
我需要放置一个<View>，position: 'absolute'以便它可以覆盖下面的另一个视图。我希望这不会出现在iOS状态栏的后面，所以我已将所有内容都放在内<SafeAreaView>。
不幸的是，绝对位置似乎是相对于全屏而不是其父视图（SafeAreaView）。
有把戏吗？
const styles = StyleSheet.create({
safeAreaView: {
flex: 1,
},
map: {
flex: 1,
},
userLocationButton: {
position: 'absolute',
right: 12,
top: 12,
},
});
return (
<SafeAreaView style={styles.safeAreaView}>
<ClusteredMapView style={styles.map} />
)}
<TouchableOpacity style={styles.userLocationButton}>
<Image source={UserLocationButton} />
</TouchableOpacity>
)}
</SafeAreaView>
);
奥卡普
我有同样的问题，通过用另一个View包裹绝对元素来解决。
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1}}>
<TouchableOpacity style={{height: 40, width: 40, borderRadius: 20}} />
</View>
</SafeAreaView>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
中心活动指示器，在React Native中具有绝对位置
- 2
结合绝对位置的React Native中的奇怪保证金行为
- 3
如何将绝对位置应用于 React Native 中的自定义组件？
- 4
React-Native：React Native是否可以找到每个设备的确切绝对位置？
- 5
具有绝对位置的div中的中心块
- 6
我如何显示：before在IE中具有绝对绝对位置的伪元素
- 7
具有绝对位置的Div位置不相等
- 8
TCPDF-如何在使用tcpdf创建的pdf中显示具有绝对位置的div？
- 9
具有绝对位置的Chid Div重叠在父级中的内容
- 10
在具有绝对位置的伪元素中垂直对齐
- 11
将具有绝对位置的元素保持在其容器内的左中
- 12
嵌套可触摸，具有绝对位置
- 13
IText：在具有绝对位置的标题上添加图像
- 14
如何从具有绝对位置的元素获取marginLeft？
- 15
具有绝对位置的页脚-响应式设计
- 16
具有绝对位置的可点击区域
- 17
元素占据具有绝对位置的元素的空间
- 18
具有绝对位置的自定义元素
- 19
尽管祖先具有绝对位置，如何在页面中使元素的位置绝对
- 20
React Native中具有相同功能名称的多个组件
- 21
react-native在Android中是否具有摇动功能？
- 22
React Native 中具有纵横比的全宽图像
- 23
React Native：KeyboardAvoidingView的子视图具有滞后/以不同的速度移动
- 24
在React Native中向窗口添加视图
- 25
React Native Flatlist中的网格视图
- 26
在React Native中更改父视图的道具
- 27
在React Native渲染功能中跳过视图
- 28
未在react native中授予位置权限
- 29
绝对位置没有高度
我来说两句