[React Native] SafeAreaView

SafeAreaView

들어가며

• 리액트 네이티브(React Native)의 SafeAreaView 컴포넌트에 대해 간단하게 정리해본다.

 

SafeAreaView

개념

• React Native에서 화면 상단의 상태바나 노치와 같은 UI 요소로부터 콘텐츠가 겹치지 않도록 자동으로 안전한 영역을 설정해주는 컴포넌트
• SafeAreaView 컴포넌트를 사용하면 다양한 기기에서 콘텐츠가 적절하게 배치되고, 화면 가장자리나 상단의 중요한 UI 요소에 가려지지 않게 된다.

Safe Area (ⓒnaukri.com)

 

주요 기능

• 노치, 상태 바, 하단의 홈 바 등과 같은 화면 요소가 있는 디바이스에서 컨텐츠가 겹치지 않도록 자동으로 여백을 추가해준다.
• 다양한 화면 크기와 해상도에 따라 안전 영역을 자동으로 인식하고, 이에 맞게 여백을 적용해준다.

 

사용 방법

• React Native에서 기본으로 내장된 컴포넌트이므로, 별도의 라이브러리 설치 없이 바로 사용할 수 있다.

			
			
			
		
import { SafeAreaView } from 'react-native';

 

• 전체 화면을 감싸는 형태로 사용한다.

			
			
			
		
<SafeAreaView style={styles.container}>
  <Text>안전 영역 안에 있는 내용</Text>
</SafeAreaView>

 

• 스타일을 자유롭게 추가할 수 있으며, 화면 크기와 여백을 적절히 조절할 수 있다.

			
			
			
		
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20, // 추가적인 여백 지정 가능
  },
});

 

참고 사이트

SafeAreaView · React Native