TIL: RN | OS 별 조건부 렌더링 (Platform.select)

지금가지 조건부 렌더링 시에
Platform.OS === 'android' 등으로 if 문을 사용했는데

Platform.select({ios:, android: })
이렇게 각 OS 별 코드를 작성할 수도 있다

Platform.select({ios: 'padding'}) 처럼 작성하면 android 의 경우 undefined 값으로 초기화 된다
undefined 일 경우 위처럼 생략할 수 있어 편리함

아래와 같이 사용할 수 있어서 좋다

import React, {useState} from 'react';
import {
  View,
  StyleSheet,
  TextInput,
  Image,
  TouchableOpacity,
  Platform,
  TouchableNativeFeedback,
} from 'react-native';

function AddTodo() {
  const [text, setText] = useState('');

  const button = (
    <View style={styles.buttonStyle}>
      <Image source={require('../assets/icons/add_white/add_white.png')} />
    </View>
  );

  return (
    <View style={styles.block}>
      <TextInput
        placeholder="할일을 입력하세요."
        style={styles.input}
        value={text}
        onChangeText={setText}
    />
    {Platform.select({
      ios: <TouchableOpacity activeOpacity={0.5}>{button}</TouchableOpacity>,
      android: (
        <View style={styles.circleWrapper}>
          <TouchableNativeFeedback>{button}</TouchableNativeFeedback>
        </View>
      ),
    })}
    </View>
  );
}