React Native 그림자 생성기
크로스 플랫폼 React Native 그림자를 시각적으로 조정한 다음 iOS와 Android 모두에 쓸 StyleSheet 조각을 복사하세요.
브라우저 내 React Native 스타일 생성기
플랫폼에 맞는 그림자 만들기
값을 조정하고 생성된 StyleSheet 스니펫을 복사하세요. 모든 작업은 이 브라우저에서 실행됩니다.
표면
브라우저 미리보기 근사치
사용 방법
사용 방법
- 그림자 색상, 불투명도, 오프셋, 흐림 반경, Android elevation을 설정하세요.
- 실시간 카드 미리 보기를 확인하고 스타일을 적용할 표면에 맞게 값을 조정하세요.
- 생성된 StyleSheet 객체를 복사해 React Native 앱의 View에 적용하세요.
두 플랫폼을 위한 하나의 스타일
React Native는 iOS에서 shadowColor, shadowOffset, shadowOpacity, shadowRadius를 매핑합니다. Android는 주로 elevation을 사용하며 최신 React Native 버전은 일부 shadow 속성도 지원합니다. 생성된 객체에는 두 속성 집합이 모두 있어 공유 스타일의 출발점으로 사용할 수 있습니다.
시각적 결과 조정
불투명도는 그림자 농도, 오프셋은 위치, 반경은 가장자리의 부드러움을 조절합니다. Elevation은 Android의 깊이 힌트이지 iOS 설정과 픽셀 단위로 동일하지 않으므로 양쪽 플랫폼에서 결과를 확인하세요.
출력을 시작점으로 사용
미리 보기는 선택한 값의 브라우저 근사치입니다. 기기 밀도, OS 버전, 렌더러, 배경색, 테두리 반경, 인접 레이어가 최종 모양을 바꿀 수 있습니다. 인터랙티브 표면을 스타일링할 때 대비와 터치 대상 요구 사항을 고려하세요.
자주 묻는 질문
더 알아보기
shadow 속성과 elevation이 모두 포함된 이유는 무엇인가요?
iOS는 shadow* 속성을 사용하고 Android는 주로 elevation에 의존합니다. 둘 다 포함하면 하나의 스타일 객체로 각 플랫폼의 의도된 깊이를 나타낼 수 있습니다.
elevation이 shadowRadius와 정확히 일치하나요?
아니요. Android elevation은 플랫폼별 깊이 힌트이므로 iOS 흐림과 일대일로 맞지 않습니다. 지원하는 기기에서 미리 보고 테스트하세요.
Pressable 또는 TouchableOpacity에 사용할 수 있나요?
네. 생성된 스타일을 보이는 표면 View에 적용하고 눌림 상태 변경을 신중하게 설계해 그림자가 명확성이나 터치 피드백을 해치지 않게 하세요.