Platform Specific Components, Layouts & Styling with React Native (iOS, Android & Web)
Platform.OS를 사용하여 현재 실행 중인 플랫폼(iOS, Android, Web 등)을 감지하고, 조건부 렌더링이나 기능 분기를 쉽게 구현할 수 있습니다. 🌐
Platform.select를 활용하여 플랫폼별로 다른 값(텍스트, 스타일 등)을 객체 형태로 지정하여 간결하게 적용할 수 있습니다. 🎯
Box.ios.tsx, Box.android.tsx, Box.web.tsx, Box.native.tsx와 같이 파일 확장자를 사용하여 플랫폼별로 다른 컴포넌트를 자동으로 로드할 수 있습니다. 🧩
app 폴더 내 라우트 파일에는 플랫폼 확장자를 직접 사용할 수 없으므로, 기본 라우트 파일에서 플랫폼별 컴포넌트를 export default로 재정의하여 사용합니다. 🔄
StyleSheet.create 내부에서 Platform.select를 사용하여 플랫폼별로 다른 스타일 속성(예: 색상)을 유연하게 적용할 수 있습니다. 🎨
PlatformColor API를 통해 iOS의 systemBlue나 Android의 holo_blue_bright와 같은 네이티브 시스템 색상을 직접 활용할 수 있습니다. (단, 웹 호환성 주의) 🌈
- Expo Router에서 레이아웃 파일에는 플랫폼 확장자를 사용할 수 있어, 플랫폼별로 완전히 다른 내비게이션 구조나 UI (예: iOS 네이티브 탭, 웹 전용 HTML/CSS 레이아웃)를 구현할 수 있습니다. 🏗️
- (베타) Expo UI 패키지를 통해 Swift UI (iOS) 및 Jetpack Compose (Android)의 네이티브 UI 프리미티브를 React Native 앱에서 직접 사용할 수 있어, 진정한 네이티브 경험을 제공합니다. 🚀