Terangkan kepentingan SafeViewArea dalam React Native?

Komponen SafeViewArea direka untuk memaparkan kandungan anda dalam sempadan selamat peranti. Ia bertanggungjawab untuk menambah pelapik dan memastikan bar navigasi, bar alat, bar tab, dll. tidak meliputi kandungan anda. Komponen ini hanya tersedia untuk peranti iOS, berikut ialah contoh kerja yang sama.

Mari kita fahami kelebihan menggunakan SafeAreaView dengan bantuan contoh.

Pertimbangkan yang berikut menggunakan komponen paparan untuk memaparkan teks "Selamat Datang ke Tutorialspoint!".

Contoh

Paparkan teks "Selamat Datang ke Komponen Tutorialspoint!"

Gunakan gaya lentur pada komponen View: 1. Komponen Teks terkandung dalam komponen Lihat dan memaparkan teks "Selamat Datang Ke Tutorialspoint!". Jika anda melihat output secara lalai, teks dipaparkan pada bar status.

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

Output

Sekarang mari kita lihat contoh yang sama dalam iOS dengan bantuan SafeAreaView.

Contoh: SafeAreaView berfungsi

Dalam contoh di bawah, kami telah menggantikan komponen View dengan SafeAreaView.

Untuk menggunakan SafeViewArea anda perlu mengimportnya seperti berikut -

import { SafeAreaView } from 'react-native';

Sekarang jika anda melihat output, anda akan melihat padding ditambahkan pada komponen teks dan kini ia tidak akan bertindih dengan bar status.

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

output

Atas ialah kandungan terperinci Terangkan kepentingan SafeViewArea dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!