SafeAreaView — คืออะไร, เลย์เอาท์กับ Safe Area ใน React Native

SafeAreaView คืออะไร?

SafeAreaView เป็นคอมโพเนนต์ React Native ที่เพิ่ม padding ภายในโดยอัตโนมัติเพื่อให้เนื้อหาไม่ถูกบดบังโดยองค์ประกอบส่วนติดต่อระบบ: แถบสถานะ, Notch, Dynamic Island และแถบนำทางระบบ คอมโพเนนต์นี้ปรากฏใน React Native 0.50 สำหรับ iOS และต่อมาถูกขยายสำหรับ Android

บน iOS SafeAreaView ใช้ UIView.safeAreaInsets ดั้งเดิม ที่เปิดตัวใน iOS 11 (2017) บน Android คอมโพเนนต์ใช้ WindowInsets — system insets ที่มีตั้งแต่ Android 5.0 (API 21) ตามข้อมูลจาก Apple (2026) 92% ของ iPhone ที่ใช้งานอยู่มีหน้าจอที่มีรอยบากหรือ Dynamic Island

ทำไมต้องใช้ Safe Area

แนวคิด Safe Area เป็นส่วนหนึ่งของคำแนะนำ Apple HIG (Human Interface Guidelines) ก่อน iPhone X (2017) พื้นที่หน้าจอทั้งหมดปลอดภัย เมื่อ Notch มาถึง Apple ได้กำหนดพื้นที่ที่ไม่ควรวางเนื้อหา: รอยตัดกล้อง, ตัวบ่งเวลาและแบตเตอรี่, ตัวบ่งหน้าแรก Android ได้นำแนวคิดที่คล้ายกันมาใช้เมื่อหน้าจอแบบมีรอยบากเกิดขึ้นในปี 2018

Safe Area ทำงานบน iOS และ Android อย่างไร

บน iOS SafeAreaView อ่าน safeAreaInsets จากคำแนะนำเลย์เอาท์ดั้งเดิม ขอบเข้าด้านบนรวมความสูงของแถบสถานะ (โดยปกติ 44 หรือ 50 จุดสำหรับ iPhone ที่มี Notch) ขอบเข้าด้านล่างคือ 34 จุดสำหรับตัวบ่งหน้าแรก Android ใช้ WindowInsets — ขอบเข้าด้านบนสำหรับแถบสถานะและขอบเข้าด้านล่างสำหรับการนำทางระบบ

สำคัญ: SafeAreaView ใช้ padding โดยอัตโนมัติ แต่เฉพาะสำหรับคอนเทนเนอร์ราก คอมโพเนนต์ที่ซ้อนกันจะไม่ได้รับการป้องกัน — แต่ละหน้าจอต้องมี SafeAreaView ของตัวเอง สำหรับหน้าต่าง modal และ BottomSheet ให้คำนึงถึง insets แยกต่างหาก

Notch, Dynamic Island และแถบระบบ

Notch คือรอยตัดฮาร์ดแวร์ที่ด้านบนของหน้าจอที่มีกล้องและเซ็นเซอร์ ปรากฏใน iPhone X (2017) Dynamic Island คือพื้นที่ซอฟต์แวร์-ฮาร์ดแวร์ของ iPhone 14 Pro และใหม่กว่า แทนที่ Notch ด้วยองค์ประกอบแบบโต้ตอบ ทั้งสองต้องใช้ขอบเข้าด้านบน 50-56 pt

บน Android รอยบากมีหลายรูปแบบ: หยดน้ำ, punch-hole, แถบใต้กล้อง SafeAreaView บน Android ใช้ WindowInsets ซึ่งคำนึงถึงรูปร่างของรอยบาก สำหรับแอปในแนวนอน จะเพิ่มขอบเข้าด้านข้างเพื่อป้องกันเนื้อหาทับซ้อนกับองค์ประกอบระบบ

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

แนวทาง Edge-to-edge (Android 15+) แนะนำให้วาดเนื้อหาใต้แถบระบบ แต่คำนึงถึง insets สำหรับองค์ประกอบแบบโต้ตอบ SafeAreaView ช่วยรักษาสมดุลนี้: พื้นหลังถูกวาดใต้แถบ ในขณะที่ปุ่มและข้อความยังคงอยู่ในโซนปลอดภัย

การใช้งานและทางเลือกของ SafeAreaView

SafeAreaView เป็นวิธีที่ง่ายที่สุดในการป้องกันเนื้อหา แต่ไม่ยืดหยุ่นเสมอไป คอมโพเนนต์ใช้ padding เดียวกันกับทุกด้าน ซึ่งไม่สะดวกเมื่อต้องการ padding ต่างกันสำหรับขอบต่างกัน ตัวอย่างเช่น padding ด้านข้างอาจไม่จำเป็น ในขณะที่ padding ด้านล่างอาจจำเป็นเฉพาะสำหรับปุ่ม

ทางเลือกหลัก: useSafeAreaInsets จาก react-native-safe-area-context (โซลูชันที่ยืดหยุ่นที่สุด), StatusBar.currentHeight บน Android, Platform.OS ด้วยการตรวจสอบรุ่นอุปกรณ์ด้วยตนเอง สำหรับกรณีที่ซับซ้อน ให้ใช้ SafeAreaView สำหรับคอนเทนเนอร์ทั่วไปและ useSafeAreaInsets สำหรับองค์ประกอบแต่ละตัว

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

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

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

ไลบรารี react-native-safe-area-context เป็นมาตรฐานโดยพฤตินัยสำหรับการทำงานกับ Safe Area ใน React Native รองรับโดย Expo, React Navigation และชุด UI ส่วนใหญ่ ไลบรารีนี้มีทั้ง hook และคอมโพเนนต์ Consumer สำหรับแนวทางเชิงฟังก์ชันและเชิงคลาส

react-native-safe-area-context สำหรับการควบคุมอย่างสมบูรณ์

react-native-safe-area-context เป็นไลบรารีที่ให้ API ที่ยืดหยุ่นกว่า SafeAreaView ในตัว ข้อได้เปรียบหลักคือการเข้าถึงค่า insets แต่ละค่า (top, bottom, left, right) ผ่าน hook useSafeAreaInsets ทำให้สามารถใช้ insets แบบเลือกได้

ไลบรารียังมี SafeAreaProvider — คอมโพเนนต์ที่จำเป็นที่ระดับบนสุดของแอปพลิเคชัน มันสมัครรับการเปลี่ยนแปลง insets ระบบเมื่อหมุนหน้าจอหรือเปิดแป้นพิมพ์ React Navigation ใช้ไลบรารีนี้โดยค่าเริ่มต้น

SafeAreaView จาก react-native-safe-area-context แตกต่างจากในตัว: มันทำงานบนอุปกรณ์มากกว่าและรองรับแอนิเมชันการเปลี่ยนแปลง insets สำหรับโปรเจกต์ใหม่ แนะนำให้ติดตั้งไลบรารีนี้เป็น dependencies และใช้ SafeAreaView ของมันแทนของในตัว

ข้อผิดพลาดทั่วไปเมื่อทำงานกับ SafeAreaView

SafeAreaView มักถูกใช้ไม่ถูกต้อง ข้อผิดพลาดแรกคือการห่อทุกคอมโพเนนต์ใน SafeAreaView ซึ่งสร้าง padding ซ้ำซ้อน กฎ: หนึ่ง SafeAreaView ต่อ View รากของหน้าจอ คอมโพเนนต์ที่ซ้อนกันสืบทอด insets ผ่านเลย์เอาท์ Flex

ข้อผิดพลาดที่สองคือการละเลย Android บน Android SafeAreaView ใช้ WindowInsets ซึ่งอาจแตกต่างกันระหว่างเวอร์ชัน OS บน Android 15+ แถบระบบอาจโปร่งใสและ insets เปลี่ยนแปลง ทดสอบ SafeAreaView บนอุปกรณ์จริงเสมอ ไม่ใช่แค่ในอีมูเลเตอร์

ข้อผิดพลาดที่สามคือ padding แบบตายตัว อย่าใช้ Platform.OS === 'ios' ? 44 : 24 — ค่า insets แตกต่างกันระหว่างรุ่นและเวอร์ชัน OS ใช้ API ระบบเสมอ: safeAreaInsets หรือ useSafeAreaInsets Dynamic Island บน iPhone 15 Pro มี insets ต่างจาก Notch บน iPhone X