React Native: 상태표시바 커스텀하기 (안드로이드, IOS)

안녕!
오늘은 안드로이드 상태표시줄에 대해 알아볼거야!

상태표시줄, Status bar

IOS는 상태표시줄 배경색 개념이 없지만 안드로이드는 지원해.
(문제는 안드로이드'만' 지원을 한다는거 😂)
IOS와 안드로이드에서 통일성있게 상태표시줄을 컴포넌트화 해보자.

iPhone X, XS, XR +++에서 상태 표시 줄 배경색을 변경하려면 React Native의 SafeAreaView 구성 요소를 사용해야합니다. 따라서 iOS의 경우이 튜토리얼은 iPhone X 이하의 장치 (iPhone 8, 7, 6, 5 등)에서만 작동합니다.

 

1️⃣ src/styles/StatusBar.tsx

import {View, StatusBar} from 'react-native';

const StatusBarComponent = ({backgroundColor, ...props}) => {

 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

 return (
   <View style={{backgroundColor, height: STATUSBAR_HEIGHT }>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
   </View>
  )
}

export default StatusBarComponent

 

2️⃣ Root.tsx

[...]

<View>
 <StatusBar backgroundColor="pink" barStyle="dark-content />
</View>

[...]

 

결과야 ⤵