อธิบายความสำคัญของ SafeViewArea ใน React Native?

คอมโพเนนต์ SafeViewArea มีไว้เพื่อแสดงเนื้อหาของคุณในขอบเขตที่ปลอดภัยของอุปกรณ์ โดยจะดูแลการเพิ่มช่องว่างภายในและยังช่วยไม่ให้ปิดบังเนื้อหาของคุณด้วยแถบนำทาง แถบเครื่องมือ แถบแท็บ ฯลฯ ส่วนประกอบนี้ใช้ได้เฉพาะกับอุปกรณ์ iOS เท่านั้น และนี่คือตัวอย่างการทำงานของสิ่งเดียวกัน

ให้เราเข้าใจตัวอย่างประโยชน์ของการใช้ SafeAreaView ด้วยตัวอย่าง

ลองพิจารณาตัวอย่างต่อไปนี้ซึ่งใช้คอมโพเนนต์มุมมองเพื่อแสดงข้อความ “ยินดีต้อนรับสู่ Tutorialspoint!” .

ตัวอย่าง

แสดงข้อความ “ยินดีต้อนรับสู่ Tutorialspoint!” ภายในดูส่วนประกอบ

สไตล์ดิ้น:1 ใช้ในองค์ประกอบมุมมอง องค์ประกอบข้อความถูกรวมไว้ในองค์ประกอบมุมมองและแสดงข้อความ "ยินดีต้อนรับสู่ Tutorialspoint!" หากคุณเห็นผลลัพธ์โดยค่าเริ่มต้น ข้อความจะแสดงบนแถบสถานะ

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
   return (
      <View style={styles.container}>
         <Text style={{ color:'red', fontSize:'30'}}>Welcome To Tutorialspoint!</Text>
            </View>
      );
   }
   const styles = StyleSheet.create({
      container: {
         flex: 1
      },
   });
export default App;

ผลลัพธ์

ตอนนี้ให้เราดูตัวอย่างเดียวกันด้วยความช่วยเหลือของ SafeAreaView ใน iOS

ตัวอย่าง:การทำงานของ SafeAreaView

ในตัวอย่างด้านล่าง เราได้แทนที่องค์ประกอบ View ด้วย SafeAreaView

ในการทำงานกับ SafeViewArea คุณต้องนำเข้าข้อมูลดังต่อไปนี้ −

import { SafeAreaView } from 'react-native';

ตอนนี้ หากคุณเห็นผลลัพธ์ คุณจะเห็นว่ามีการเพิ่มช่องว่างภายในองค์ประกอบข้อความ และตอนนี้จะไม่ทับซ้อนกับแถบสถานะ

import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
const App = () => {
   return (
      <SafeAreaView style={styles.container}>
         <Text style={{ color:'red', fontSize:'30'}}>Welcome To Tutorialspoint!</Text>
            </SafeAreaView>
      );
   }
   const styles = StyleSheet.create({
   container: {
      flex: 1
   },
});
export default App;

ผลลัพธ์