ReactNative的SafeAreaView用法解释说明

2018年04月14日 iOS 2条评论 阅读9174次

ReactNative官方Framework从0.50.1开始,加入了针对iPhone X设备齐刘海小嘴巴页面适配的组件SafeAreaView,为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便。


ReactNative中SafeAreaView组件的目的是在设备安全操作边界内渲染内容。目前只适合iOS设备。

SafeAreaView渲染嵌套在其中的内容视图,并且能自动适应边界上的导航栏、Tab栏、工具栏一级其他父布局的视图保证不被覆盖遮挡。
另外,最重要的一点,安全区域的边距发硬了移动设备的屏幕,比如圆角或摄像头区域

用法:
就用SafeAreaView嵌套最根级别的视图,并且在style中加上flex:1,style中也可以增加其他页面样式

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>



特别要注意的是,SafeAreaView 组件中style的flex:1  以及子View中styleflex:1 一定要添加,否则在手机屏幕上是什么都不会显示的。


分享本文至:

WRITTEN BY

avatar
本文标签:ReactNativeiPhoneX
看了本文是不是觉得很赞,那就赶紧点击下面按钮分享给身边的朋友吧!

2 条评论

  1. avatar 网赚博客

    刚好我也遇到这个问题,通过搜索引来的,谢谢分享。

欢迎留言




用户登录

sitemap