عرض مصدر ReactNative/safeareaview

<noinclude>{{DISPLAYTITLE:المكون SafeAreaView في React Native}}</noinclude>
الغرض من مكوّن <code>SafeAreaView</code> هو تصيير محتوى داخل حدود المنطقة الآمنة للجهاز. لا ينطبق حاليًا إلا على أجهزة iOS  ذات الإصدار 11 من نظام التشغيل iOS أو أحدث.

يُصيِّر مكوّن <code>SafeAreaView</code> محتوًى متداخلًا ويُطبِّق الحاشية (padding) تلقائيًا ليعكس جزء العرض الذي لا تغطيه أشرطة التنقل (navigation bars) وأشرطة علامات التبويب وأشرطة الأدوات وعروضٍ أسلافٍ (ancestor views) أخرى. والأهم من ذلك، تَعكس حواشي المنطقة الآمنة الحدود المادية للشاشة، مثل الزوايا الدائرية أو مساحة الكاميرا (أي منطقة المستشعرات على iPhone X).

==مثال==
لاستخدام المكوّن، غلِّف عرض المستوى العلوي (top level view) الخاص بك باستخدام مكوّن <code>SafeAreaView</code> بنمط ‎‎<code>flex: 1</code>‎‎. قد ترغب أيضًا في استخدام لون خلفيةٍ يطابق تصميم تطبيقك.

إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/safeareaview تجربة حية]):
<syntaxhighlight lang="javascript">
import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Page content</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;
</syntaxhighlight>
== الخاصيات ==
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.

ملاحظة: بما أن الحاشية مستعملة لتنفيذ سلوك الكون، فسيجري تجاهل قواعد الحاشية المطبقة على مكون SafeAreaView وقد تعطي نتائج مختلفة باختلاف المنصة، لذا انظر المشكلة [https://github.com/facebook/react-native/issues/22211 #22211] لمزيد من التفصيل.

===‎‎<code>emulateUnlessSupported</code>‎‎===
{| class="wikitable"
!النوع
!مطلوب
!القيمة الافتراضية
|-
|قيمة منطقية
|لا
|‎‎<code>true</code>‎‎
|}

== مصادر ==
* [https://reactnative.dev/docs/safeareaview صفحة SafeAreaView في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]