ما هو مكون SafeAreaView وكيف تطور في React Native وتكامله مع react-native-safe-area-context؟

الإجابة المختصرة

يضمن SafeAreaView عدم تغطية المحتوى بواسطة نتوءات الشاشة (Notches)، والجزر التفاعلية (Dynamic Island)، وزوايا الشاشات المستديرة وأشرطة التنقل السفلية.

الشرح

يعمل SafeAreaView المدمج فقط على iOS وبطريقة محدودة. لذلك أصبح المعيار المعتمد في المنظومة هو مكتبة react-native-safe-area-context، حيث توفر SafeAreaProvider وخطاف useSafeAreaInsets() لحساب الهوامش الدقيقة (top, bottom, left, right) وتطبيقها بسلاسة على كافة أنظمة وتشعبات الأجهزة مع دعم الرسوم.

مثال بالكود

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View, Text } from 'react-native';

function CustomHeader() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top, backgroundColor: '#6200ee' }}>
      <Text style={{ color: '#fff', fontSize: 18, padding: 16 }}>عنوان الشاشة</Text>
    </View>
  );
}

أخطاء شائعة

• استخدام SafeAreaView المدمج القديم وتوقع عمله التلقائي على نتوءات كاميرات هواتف أندرويد الحديثة.

أسئلة متابعة

• ما هي الـ Modal في React Native وكيف يتم التعامل مع النوافذ المنبثقة بشكل سليم؟

المصادر

• React Native docs — SafeAreaView
• react-native-safe-area-context — README