ReactNative的SafeAreaView用法解释说明

2018年04月14日 iOS 10条评论 阅读13830次

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

10 条评论

  1. avatar gpscaddy

    <a href="http://www.negamarket.net/nike-air-max-thea-herren-alle-schwarz-butye">nike air max thea herren alle schwarz</a> <a href="http://www.netdecode.net/nike-air-max-97-argento-gituttio-kurpesc">nike air max 97 argento gituttio</a> <a href="http://www.newbridgebank.net/kobe-8-sko-weight-butya">kobe 8 sko weight</a> <a href="http://www.newellfirm.net/nike-lunarglide-8-himmelblau-gelb-schuheg">nike lunarglide 8 himmelblau gelb</a> <a href="http://www.newlawpress.net/jordan-super-fly-2-gr%C3%A5-sort-butyf">jordan super fly 2 gr氓 sort</a> <a href="http://www.newscenefiles.net/air-jordan-horizon-marrone-grigio-butya">air jordan horizon marrone grigio</a>
    gpscaddy http://www.gpscaddy.net/

  2. avatar bigdstattoos

    <a href="http://www.shopmrkatin.com/nike-air-max-svart-r%C3%B8d-hvit-obuvk">nike air max svart r酶d hvit</a> <a href="http://www.bassgoesgreen.com/mennns-nike-air-max-2017-gull-gul-obuvi">mennns nike air max 2017 gull gul</a> <a href="http://www.campsiberia.com/adidas-superstar-adicolor-halo-azul-zapatosl">adidas superstar adicolor halo azul</a> <a href="http://www.parlapotuak.com/adidas-yeezy-nero-prezzo-scarpeh">adidas yeezy nero prezzo</a> <a href="http://www.bhramarhealth.com/adidas-pure-boost-black-white-shoesk">adidas pure boost black white</a> <a href="http://www.tamisettc.com/oakley-holbrook-sunglasses-shaun-white-sunglassesh">oakley holbrook sunglasses shaun white</a>
    bigdstattoos http://www.bigdstattoos.com/

  3. avatar kuetahyalilar

    <a href="http://www.maytorrent.com/air-jordan-superfly-2-rouge-chaussuresh">air jordan superfly 2 rouge</a> <a href="http://www.gplandiet.com/adidas-prougeator-2004-chaussuresj">adidas prougeator 2004</a> <a href="http://www.mizenbouche.com/schwarz-wei%C3%9F-blau-nike-air-max-tn-frau-schuhek">schwarz wei脽 blau nike air max tn frau</a> <a href="http://www.owenandfarney.com/dallas-cowboys-nike-nfl-men-nflh">dallas cowboys nike nfl men</a> <a href="http://www.escortsinoz.com/adidas-stan-smith-mennns-svart-obuvi">adidas stan smith mennns svart</a> <a href="http://www.itsallfetish.com/air-jordan-3-true-blue-2011-shoesj">air jordan 3 true blue 2011</a>
    kuetahyalilar http://www.kuetahyalilar.com/

  4. avatar gardensbyruth

    <a href="http://www.flockandvine.com/nike-air-huarache-nero-laser-arancia-butya">nike air huarache nero laser arancia</a> <a href="http://www.formasindo.com/adidas-yeezy-boost-350-b%C3%B8rn-brun-hvid-butyc">adidas yeezy boost 350 b酶rn brun hvid</a> <a href="http://www.covergirlmag.com/nike-mercurial-superfly-naranja-test-scarpeg">nike mercurial superfly naranja test</a> <a href="http://www.fuckitmusic.com/adidas-tubular-runner-weave-rosado-plata-chaussuresb">adidas tubular runner weave rosado plata</a> <a href="http://www.mpdcir.com/air-max-95-schwarz-grape-butya">air max 95 schwarz grape</a> <a href="http://www.faketheenvy.com/air-jordan-future-gull-himmelen-bl%C3%A5-schuhee">air jordan future gull himmelen bl氓</a>
    gardensbyruth http://www.gardensbyruth.com/

  5. avatar booksekart

    <a href="http://www.blackandjules.com/nike-air-presto-essential-femmes-fonctionnement-chaussures-schuhef">nike air presto essential femmes fonctionnement chaussures</a> <a href="http://www.codepuzzel.com/nike-air-max-95-university-r%C3%B8d-line-scarpef">nike air max 95 university r酶d line</a> <a href="http://www.cruisersdiner.com/nike-kd-7-kvinners-svart-gul-scarpeg">nike kd 7 kvinners svart gul</a> <a href="http://www.drminteriors.com/adidas-rose-773-ii-mennns-basketball-sko-goo-kurpesa">adidas rose 773 ii mennns basketball sko goo</a> <a href="http://www.equacart.com/nike-air-jordan-eclipse-hvid-line-schuhee">nike air jordan eclipse hvid line</a> <a href="http://www.garyfaulconer.com/femmes-air-jordan-retro-13-blanc-noir-kurpesc">femmes air jordan retro 13 blanc noir</a>
    booksekart http://www.booksekart.com/

  6. 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/

  7. 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]

  8. 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/

  9. avatar 网赚博客

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

欢迎留言




用户登录

sitemap