ReactNative的SafeAreaView用法解释说明

2018年04月14日 iOS 5条评论 阅读11343次

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
看了本文是不是觉得很赞,那就赶紧点击下面按钮分享给身边的朋友吧!

5 条评论

  1. avatar detabouw

    <a href="http://www.advertiseguns.com/nike-vontaze-burfict-youth-orange-elite-jersey-55-nfl-alternate-cincinnati-bengals-nflw">nike vontaze burfict youth orange elite jersey 55 nfl alternate cincinnati bengals</a> <a href="http://www.bodhiboxers.com/nike-air-max-90-premium-tape-schwarz-camo-grau-butye">nike air max 90 premium tape schwarz camo grau</a> <a href="http://www.chateaudefous.com/nike-kobe-8-noir-and-or-games-kurpesc">nike kobe 8 noir and or games</a> <a href="http://www.prinslabs.com/ralph-lauren-jumpers-brun-oransje-polow">ralph lauren jumpers brun oransje</a> <a href="http://www.solarishelp.com/puma-ferrari-i-noir-rouge-line-butyf">puma ferrari i noir rouge line</a> <a href="http://www.tioneo.com/mennns-big-pony-polo-svart-gr%C3%A5-poloz">mennns big pony polo svart gr氓</a>
    detabouw http://www.detabouw.com/

  2. avatar vindianescort

    <a href="http://www.karotorossian.com/josh-doctson-washington-redskins-mens-limited-salute-to-service-nike-jersey-olive-nflw">josh doctson washington redskins mens limited salute to service nike jersey olive</a> <a href="http://www.newworkmatrix.com/kvinners-asics-gel-kayano-20-rosa-hvit-chaussuresa">kvinners asics gel kayano 20 rosa hvit</a> <a href="http://www.rochecpa.com/nike-kobe-9-mujeres-oro-naranja-butya">nike kobe 9 mujeres oro naranja</a> <a href="http://www.thermilax.com/nike-hyperdunk-2014-femminile-arancia-cielo-blu-butyd">nike hyperdunk 2014 femminile arancia cielo blu</a> <a href="http://www.buffaloquaker.com/adidas-superstar-blanco-zalando-obuvg">adidas superstar blanco zalando</a> <a href="http://www.etnoyamal.com/nike-hypershift-squadron-bl%C3%A5-line-kurpesa">nike hypershift squadron bl氓 line</a>
    [url=http://www.vindianescort.com/]vindianescort[/url]

  3. avatar x745mfcu

    <a href="http://www.c6wunx94.com/nike-shox-deliver-alle-schwarz-ops-kurpesc">nike shox deliver alle schwarz ops</a> <a href="http://www.6o56ja90.com/mennns-nike-blazer-svart-bl%C3%A5-butya">mennns nike blazer svart bl氓</a> <a href="http://www.5eamh55c.com/jordan-1-r%C3%B8d-hvit-schuheg">jordan 1 r酶d hvit</a> <a href="http://www.o1noys9i.com/nike-air-max-95-jacquard-bianca-granite-butyf">nike air max 95 jacquard bianca granite</a> <a href="http://www.8pfkv589.com/nike-air-max-tailwind-7-rose-argent-butya">nike air max tailwind 7 rose argent</a> <a href="http://www.37cmfwoq.com/air-jordan-eclipse-rosa-brun-obuvc">air jordan eclipse rosa brun</a>
    x745mfcu http://www.x745mfcu.com/

  4. avatar 网赚博客

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

欢迎留言




用户登录

sitemap