[RN] StatusBar 변경하는 법

 

리액트 네이티브의 SafeAreaView 밖의 상단바 또는 터치 영역의 색상을 변경하는 방법에 대한 글임.

초록색으로 표시된 부분을 말함.

 

상단 영역 색상 변경

Android

import { StatusBar } from 'react-native';

<>
	<StatusBar barStyle="light-content" backgroundColor={'red'} />
	<View style={styles.container}>
		<Text>Hi!</Text>
	</View>
</>

• react-native 에서 제공하는 StatusBar 를 통해 변경이 가능함. barStyle 로 폰트 색상 변경이 가능하며, backgroundColor 로 배경 색상을 변경할 수 있음.

iOS

import { SafeAreaView } from 'react-native';

<>
	<SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
	<StatusBar barStyle="light-content" />
	<View style={styles.container}>
		<Text>Hi!</Text>
	</View>
</>

• 폰트 색상 변경은 안드로이드와 동일한 방법이지만, 배경 색상은 SafeAreaView 의 backgroundColor 로 직접 작성해주어야 함. flex: 0 으로 하면 상단 색상으로 적용이 됨.

 

전체 (상단, 하단) 영역 색상 변경

<SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
	<View style={styles.container}>
		<Text>Hi!</Text>
	</View>
</SafeAreaView>

• SafeAreaView 로 모든 컴포넌트를 감싸주면 적용됨. 상단 색만 다르게 적용하고 싶다면, 위의 상단 영역 색상 변경 코드를 추가해주면 따로 반영됨.

 

[참고/인용]

• https://medium.com/reactbrasil/react-native-set-different-colors-on-top-and-bottom-in-safeareaview-component-f008823483f3
• https://aboutreact.com/react-native-safeareaview/