개발관련

...Platform.select()

splitor 2024. 3. 20. 07:49

Platform.select()은 React Native에서 사용되는 메서드로, 현재 앱이 실행되고 있는 플랫폼에 따라 다른 값을 반환하는 데 사용됩니다. 이는 크로스 플랫폼 앱을 개발할 때 유용합니다. 예를 들어, iOS와 Android 각각 다른 스타일을 적용해야 하는 경우에 활용될 수 있습니다.

보통 Platform.select()은 객체를 받아 해당 플랫폼의 키를 선택하고 해당 키에 해당하는 값을 반환합니다. 예를 들어:

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
  outputCard: {
    backgroundColor: "white",
    borderRadius: 16,
    borderWidth: 1,
    padding: 10,
    marginTop: 30,
    marginBottom: 20,

    ...Platform.select({
      ios: {
        shadowOffset: { width: 2, height: 2 },
        shadowColor: "#333",
        shadowOpacity: 0.3,
        shadowRadius: 4,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});