React Native에서 SafeViewArea의 중요성을 설명하시겠습니까?

SafeViewArea 구성 요소는 장치의 안전한 경계에 콘텐츠를 표시하기 위한 것입니다. 패딩 추가를 처리하고 탐색 표시줄, 도구 모음, 탭 표시줄 등으로 콘텐츠를 가리지 않도록 합니다. 이 구성 요소는 iOS 장치에서만 사용할 수 있습니다. 다음은 동일한 작업 예입니다.

예를 통해 SafeAreaView 사용의 이점을 이해하도록 하겠습니다.

View 구성요소를 사용하여 “Welcome to Tutorialspoint!” 텍스트를 표시하는 다음 예를 고려하십시오. .

예시

"Tutorialspoint에 오신 것을 환영합니다!"라는 텍스트 표시 내부 보기 구성요소

스타일 flex:1은 View 구성 요소에서 사용됩니다. Text 구성 요소는 View 구성 요소 내부에 래핑되고 "Welcome To 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;

출력

이제 iOS에서 SafeAreaView를 사용하여 동일한 예를 살펴보겠습니다.

예:SafeAreaView 작업

아래 예에서는 View 구성 요소를 SafeAreaView로 대체했습니다.

SafeViewArea로 작업하려면 다음과 같이 가져와야 합니다. −

import { SafeAreaView } from 'react-native';

이제 출력을 보면 Text 구성 요소에 패딩이 추가된 것을 볼 수 있으며 이제 상태 표시줄과 겹치지 않습니다.

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;

출력