[RN] Platform, iOS와 Android 각각 CSS 스타일 지정

fejigu·2023년 5월 17일
1

React Native

목록 보기
9/11
post-thumbnail


🎨 React Native에서 iOS와 Android 각각 CSS 스타일을 지정

→ React Native에서는 iOS와 Android 각각에 대해 CSS 스타일을 지정할 수 있다.

현재 프로젝트에서도 iOS와 Android 둘다 고려하여 출시할 것이다. 이를 위해 React Native에서는 Platform API를 사용하여 현재 실행 중인 플랫폼을 확인하고 해당 플랫폼에 특정한 스타일을 적용할 수 있는 것이다.

1) Platform.OS를 사용하여 현재 실행 중인 플랫폼을 확인한다.
2) Platform.OS는 'ios' 또는 'android' 값을 가진다.
3) 해당 플랫폼에 따라 스타일을 다르게 지정한다.

//예시 코드
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Platform.OS === 'ios' ? 'lightgray' : 'lightblue',
  },
  text: {
    fontSize: Platform.OS === 'ios' ? 20 : 16,
    color: Platform.OS === 'ios' ? 'black' : 'white',
  },
});
profile
console.log(frontendjigu( ☕️, 📱); // true

0개의 댓글