ReactNative的SafeAreaView用法解释说明

2018年04月14日 iOS 8条评论 阅读15876次

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

8 条评论

  1. avatar staholidays

    <a href="http://www.qtnkxrcr.com/frau-adidas-zx-flux-leopard-print-schuheh">frau adidas zx flux leopard print</a> <a href="http://www.blcatering.com/adidas-ultra-boost-mystery-red-shoesk">adidas ultra boost mystery red</a> <a href="http://www.uchbhekf.com/nike-free-4.0-flyknit-gr%C3%A5-kvinders-skol">nike free 4.0 flyknit gr氓 kvinders</a> <a href="http://www.recspokane.com/nike-air-max-90-svart-l%C3%A6r-on-feet-obuvk">nike air max 90 svart l忙r on feet</a> <a href="http://www.sjgncnph.com/nike-air-presto-blu-grigio-scarpei">nike air presto blu grigio</a> <a href="http://www.loewendoors.com/naranja-blanco-hombres-nike-paul-rodriguez-9-zapatos-zapatosh">naranja blanco hombres nike paul rodriguez 9 zapatos</a>
    staholidays http://www.staholidays.com/

  2. avatar masvidalyoga

    <a href="http://www.videogue.com/femminile-nike-air-max-2015-rosa-bianca-rosso-nero-scarpek">femminile nike air max 2015 rosa bianca rosso nero</a> <a href="http://www.actuelvet.com/air-jordan-retro-12-black-and-blue-shoesi">air jordan retro 12 black and blue</a> <a href="http://www.jstreetdoc.com/triple-blanco-adidas-ultra-boost-2.0-zapatosi">triple blanco adidas ultra boost 2.0</a> <a href="http://www.rightcardeals.com/nike-dunk-sky-high-gr%C3%A5-and-sort-skoh">nike dunk sky high gr氓 and sort</a> <a href="http://www.wearesmashed.com/prossoator-adidas-scarpei">prossoator adidas</a> <a href="http://www.icecardonline.com/converse-one-star-tutti-nero-scarpej">converse one star tutti nero</a>
    masvidalyoga http://www.masvidalyoga.com/

  3. avatar dvdlivedoor

    <a href="http://www.arcellphones.com/chicago-cubs-sandberg-jersey-nflh">chicago cubs sandberg jersey</a> <a href="http://www.autimispc.com/kobe-5-armada-azul-yarn-shoese">kobe 5 armada azul yarn</a> <a href="http://www.kevingoersch.com/2017-new-style-polo-ralph-lauren-checked-shirt-313e-pink-white-poloh">2017 new style polo ralph lauren checked shirt 313e pink white</a> <a href="http://www.bursakirmizi.com/nike-free-5.0-hellblau-oransje-foota">nike free 5.0 hellblau oransje</a> <a href="http://www.kudusbilinci.com/nike-flyknit-lunar-1-frau-gr%C3%BCn-gelb-runninga">nike flyknit lunar 1 frau gr眉n gelb</a> <a href="http://www.pocketrats.com/nike-air-max-87-sb-gris-naranja-scarpef">nike air max 87 sb gris naranja</a>
    dvdlivedoor http://www.dvdlivedoor.com/

  4. avatar bigcbigcard

    <a href="http://www.newinfit.com/nike-lebron-witness-lyser%C3%B8d-bl%C3%A5-skoe">nike lebron witness lyser酶d bl氓</a> <a href="http://www.thebedguide.com/kyrie-irving-youth-basketball-jersey-nflh">kyrie irving youth basketball jersey</a> <a href="http://www.lisastrnad.com/edmonton-oilers-koho-jersey-nfli">edmonton oilers koho jersey</a> <a href="http://www.plangivethank.com/florida-state-seminoles-2-deion-sanders-red-throwback-nike-men-2016-ncaa-stitched-new-jersey-nflh">florida state seminoles 2 deion sanders red throwback nike men 2016 ncaa stitched new jersey</a> <a href="http://www.sikisfilim.com/nike-air-max-tn-bl%C3%A5-oransje-urine-shoese">nike air max tn bl氓 oransje urine</a> <a href="http://www.boajewlery.com/mens-short-sleeve-polo-with-pocket-poloh">mens short sleeve polo with pocket</a>
    bigcbigcard http://www.bigcbigcard.com/

  5. avatar mynewsoutlet

    <a href="http://www.ibrahimoner.com/oakland-athletics-hats-cheap-42-hatg">oakland athletics hats cheap 42</a> <a href="http://www.quickbeautyhq.com/ray-ban-rb3025-aviator-gold-brown-sunglasses-y8-sunglassesf">ray ban rb3025 aviator gold brown sunglasses y8</a> <a href="http://www.epointsclub.com/nike-air-max-2015-black-orange-skox">nike air max 2015 black orange</a> <a href="http://www.alaskanuber.com/billig-nike-air-max-87-sb-herren-gr%C3%BCn-skoc">billig nike air max 87 sb herren gr眉n</a> <a href="http://www.ycbrowsbeauty.com/nike-kobe-7-womens-silver-blue-skob">nike kobe 7 womens silver blue</a> <a href="http://www.gfatraining.com/nike-air-max-1-hvid-night-factor-shoesv">nike air max 1 hvid night factor</a>
    [url=http://www.mynewsoutlet.com/]mynewsoutlet[/url]

  6. avatar divasorlando

    <a href="http://www.wordsting.com/north-face-denali-jacket-temperature-range-northfaceh">north face denali jacket temperature range</a> <a href="http://www.buildtwitter.com/nike-magista-obra-fg-high-tops-armygreen-shoesh">nike magista obra fg high tops armygreen</a> <a href="http://www.procrastivity.com/supra-bleeker-blanc-chaussuresl">supra bleeker blanc</a> <a href="http://www.rastadread.com/nike-mercurial-superfly-fg-cleats-pink-white-black-shoesj">nike mercurial superfly fg cleats pink white black</a> <a href="http://www.govtjobsstore.com/texas-state-hat-hatk">texas state hat</a> <a href="http://www.alofilmizle.com/hvid-l%C3%A6der-converse-pris-skoj">hvid l忙der converse pris</a>
    divasorlando http://www.divasorlando.com/

  7. avatar 网赚博客

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

欢迎留言




用户登录

sitemap