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';

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

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

الخاصيات

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

‎‎emulateUnlessSupported‎‎

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

مصادر

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