1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["11251"],{15155(e,t,n){n.r(t),n.d(t,{metadata:()=>a,default:()=>p,frontMatter:()=>i,contentTitle:()=>d,toc:()=>o,assets:()=>c});var a=JSON.parse('{"id":"safeareaview","title":"SafeAreaView","description":"SafeAreaView\u7684\u76EE\u7684\u662F\u5728\u4E00\u4E2A\u201C\u5B89\u5168\u201D\u7684\u53EF\u89C6\u533A\u57DF\u5185\u6E32\u67D3\u5185\u5BB9\u3002\u5177\u4F53\u6765\u8BF4\u5C31\u662F\u56E0\u4E3A\u76EE\u524D\u6709 iPhone X \u8FD9\u6837\u7684\u5E26\u6709\u201C\u5218\u6D77\u201D\u7684\u5168\u9762\u5C4F\u8BBE\u5907\uFF0C\u6240\u4EE5\u9700\u8981\u907F\u514D\u5185\u5BB9\u6E32\u67D3\u5230\u4E0D\u53EF\u89C1\u7684\u201C\u5218\u6D77\u201D\u8303\u56F4\u5185\u3002\u672C\u7EC4\u4EF6\u76EE\u524D\u4EC5\u652F\u6301 iOS \u8BBE\u5907\u4EE5\u53CA iOS 11 \u6216\u66F4\u9AD8\u7248\u672C\u3002","source":"@site/versioned_docs/version-0.80/safeareaview.md","sourceDirName":".","slug":"/safeareaview","permalink":"/docs/0.80/safeareaview","draft":false,"unlisted":false,"editUrl":"https://github.com/reactnativecn/react-native-website/blob/production/cnwebsite/../cndocs/safeareaview.md","tags":[],"version":"0.80","frontMatter":{"id":"safeareaview","title":"SafeAreaView"},"sidebar":"\u7EC4\u4EF6","previous":{"title":"InputAccessoryView","permalink":"/docs/0.80/inputaccessoryview"},"next":{"title":"\u56FE\u7247\u6837\u5F0F\u5C5E\u6027","permalink":"/docs/0.80/image-style-props"}}'),s=n(62540),r=n(43023);let i={id:"safeareaview",title:"SafeAreaView"},d,c={},o=[{value:"\u793A\u4F8B",id:"\u793A\u4F8B",level:2},{value:"Props",id:"props",level:2},{value:"View Props",id:"view-props",level:3},{value:"<code>emulateUnlessSupported</code>",id:"emulateunlesssupported",level:3}];function l(e){let t={a:"a",blockquote:"blockquote",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"SafeAreaView"}),"\u7684\u76EE\u7684\u662F\u5728\u4E00\u4E2A\u201C\u5B89\u5168\u201D\u7684\u53EF\u89C6\u533A\u57DF\u5185\u6E32\u67D3\u5185\u5BB9\u3002\u5177\u4F53\u6765\u8BF4\u5C31\u662F\u56E0\u4E3A\u76EE\u524D\u6709 iPhone X \u8FD9\u6837\u7684\u5E26\u6709\u201C\u5218\u6D77\u201D\u7684\u5168\u9762\u5C4F\u8BBE\u5907\uFF0C\u6240\u4EE5\u9700\u8981\u907F\u514D\u5185\u5BB9\u6E32\u67D3\u5230\u4E0D\u53EF\u89C1\u7684\u201C\u5218\u6D77\u201D\u8303\u56F4\u5185\u3002\u672C\u7EC4\u4EF6\u76EE\u524D\u4EC5\u652F\u6301 iOS \u8BBE\u5907\u4EE5\u53CA iOS 11 \u6216\u66F4\u9AD8\u7248\u672C\u3002"]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"SafeAreaView"}),"\u4F1A\u81EA\u52A8\u6839\u636E\u7CFB\u7EDF\u7684\u5404\u79CD\u5BFC\u822A\u680F\u3001\u5DE5\u5177\u680F\u7B49\u9884\u7559\u51FA\u7A7A\u95F4\u6765\u6E32\u67D3\u5185\u90E8\u5185\u5BB9\u3002\u66F4\u91CD\u8981\u7684\u662F\uFF0C\u5B83\u8FD8\u4F1A\u8003\u8651\u5230\u8BBE\u5907\u5C4F\u5E55\u7684\u5C40\u9650\uFF0C\u6BD4\u5982\u5C4F\u5E55\u56DB\u5468\u7684\u5706\u89D2\u6216\u662F\u9876\u90E8\u4E2D\u95F4\u4E0D\u53EF\u663E\u793A\u7684\u201C\u5218\u6D77\u201D\u533A\u57DF\u3002"]}),"\n",(0,s.jsx)(t.h2,{id:"\u793A\u4F8B",children:"\u793A\u4F8B"}),"\n",(0,s.jsxs)(t.p,{children:["\u53EA\u9700\u7B80\u5355\u5730\u628A\u4F60\u539F\u6709\u7684\u89C6\u56FE\u7528",(0,s.jsx)(t.code,{children:"SafeAreaView"}),"\u5305\u8D77\u6765\uFF0C\u540C\u65F6\u8BBE\u7F6E\u4E00\u4E2A",(0,s.jsx)(t.code,{children:"flex: 1"}),"\u7684\u6837\u5F0F\u3002\u5F53\u7136\u53EF\u80FD\u8FD8\u9700\u8981\u4E00\u4E9B\u548C\u4F60\u7684\u8BBE\u8BA1\u76F8\u5339\u914D\u7684\u80CC\u666F\u8272\u3002"]}),"\n",(0,s.jsx)(t.div,{className:"snack-player","data-snack-name":"SafeAreaView","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7B%20StyleSheet%2C%20Text%2C%20SafeAreaView%20%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CText%3EPage%20content%3C%2FText%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20)%3B%5Cn%7D%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%7D%2C%5Cn%7D
1)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"ios,android,web","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h1,{id:"\u6587\u6863",children:"\u6587\u6863"}),"\n",(0,s.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,s.jsx)(t.h3,{id:"view-props",children:(0,s.jsx)(t.a,{href:"/docs/0.80/view#props",children:"View Props"})}),"\n",(0,s.jsxs)(t.p,{children:["\u7EE7\u627F\u4E86\u6240\u6709\u7684",(0,s.jsx)(t.a,{href:"/docs/0.80/view#props",children:"View Props"}),"."]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:["As padding is used to implement the behavior of the component, padding rules in styles applied to a ",(0,s.jsx)(t.code,{children:"SafeAreaView"})," will be ignored and can cause different results depending on the platform. See ",(0,s.jsx)(t.a,{href:"https://github.com/facebook/react-native/issues/22211",children:"#22211"})," for details."]}),"\n"]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"emulateunlesssupported",children:(0,s.jsx)(t.code,{children:"emulateUnlessSupported"})}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"\u7C7B\u578B"}),(0,s.jsx)(t.th,{children:"Required"}),(0,s.jsx)(t.th,{children:"Default"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"bool"}),(0,s.jsx)(t.td,{children:"No"}),(0,s.jsx)(t.td,{children:"true"})]})})]})]})}function p(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},43023(e,t,n){n.d(t,{R:()=>i,x:()=>d});var a=n(63696);let s={},r=a.createContext(s);function i(e){let t=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),a.createElement(r.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.