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

SafeViewArea 구성 요소는 장치의 안전 경계 내에 콘텐츠를 표시하도록 설계되었습니다. 패딩을 추가하고 탐색 모음, 도구 모음, 탭 모음 등이 콘텐츠를 덮지 않도록 하는 역할을 담당합니다. 이 구성 요소는 iOS 장치에서만 사용할 수 있습니다. 다음은 동일한 작업 예입니다.

예제를 통해 SafeAreaView 사용의 이점을 이해해 보겠습니다.

뷰 구성 요소를 사용하여 텍스트를 표시하는 다음을 고려하세요. "Welcome to Tutorialspoint!".

예

"Welcome to Tutorialspoint!" 텍스트 표시 Inside View 구성 요소

View 구성 요소에 스타일 플렉스 사용: 1. 텍스트 구성 요소는 보기 구성 요소 내에 포함되어 있으며 "Welcome To Tutorialspoint!"라는 텍스트를 표시합니다. 기본적으로 출력이 표시되면 상태 표시줄에 텍스트가 렌더링됩니다.

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

이제 SafeAreaView의 도움을 받아 iOS에서 동일한 예를 살펴보겠습니다.

예: SafeAreaView 작동

아래 예에서는 보기 구성 요소를 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:&#39;red&#39;, fontSize:&#39;30&#39;}}>Welcome To Tutorialspoint!</Text>
            </SafeAreaView>
      );
   }
   const styles = StyleSheet.create({
   container: {
      flex: 1
   },
});
export default App;

출력

위 내용은 React Native에서 SafeViewArea의 중요성을 설명하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!