المكون SafeAreaView في React Native

الغرض من مكوّن SafeAreaView هو تصيير محتوى داخل حدود المنطقة الآمنة للجهاز. لا ينطبق حاليًا إلا على أجهزة iOS ذات الإصدار 11 من نظام التشغيل iOS أو أحدث.

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

مثال

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

إليك المثال التالي (تجربة حية):

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;

الخاصيات

يرث خاصيّات المكوّن View.

ملاحظة: بما أن الحاشية مستعملة لتنفيذ سلوك الكون، فسيجري تجاهل قواعد الحاشية المطبقة على مكون SafeAreaView وقد تعطي نتائج مختلفة باختلاف المنصة، لذا انظر المشكلة #22211 لمزيد من التفصيل.

‎‎emulateUnlessSupported‎‎

النوع	مطلوب	القيمة الافتراضية
قيمة منطقية	لا	‎‎true‎‎

مصادر

• صفحة SafeAreaView في توثيق React Native الرسمي.