웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react native

react native 백그라운드 transparent 투명효과 부여하기

Last Modified : 2020-11-25 / Created : 2018-08-13
16,967
View Count
react native에서 투명한 배경화면을 설정하는 방법을 알아봅니다. 어떻게 하면 될까요?

가장 간단한 방법은 css를 사용하는 방법입니다. 즉 react native의 해당 요소에 style 속성을 사용하여 투명한 배경색을 적용 할 수 있습니다. 이 때 style의 background 속성을 추가하고 그 값으로 rgba를 값으로 사용하면 됩니다. rgba의 a 값은 alpha를 의미하며 0 ~ 1 사이의 값으로 투명도 조절이 가능합니다.



! Reactnative 코드 작성하기

간단하게 예를 들어 코드를 작성하면 아래와 같습니다. 만약 앱 내부의 View 컴포넌트에 이를 적용하면 아래처럼 사용합니다.
<View style={{
  backgroundColor: '(0, 0, 0, 0.5)',
}}>
  ...
</View>

코드를 간략하게 설명하자면 View 컴포넌트에 style prop을 추가합니다. 그리고 backgroundColor와 그 값으로 배경색을 rgba를 사용하여 추가하였습니다. 값을 보면 제일 마지막 alpha의 값을 0.5를 사용하였습니다. 즉 검정색의 을 투명도 0.5를 사용한 만큼 적용되게 됩니다.


이제 코드 작성은 완료되었습니다. 실제 앱에 적용하면 뒤에 겹치는 레이어가 있는 경우 투명하게 보이게 될 것입니다.

Previous

하이브리드앱? React Native 알아보기

Previous

react native standalone 방법으로 apk 만들기