[React Native] Picker 사용

react-native-picker

npm install @react-native-picker/picker

위와 같은 명령어로 install
https://github.com/react-native-picker/picker

멍청한 짓 하지 말자. 꼭 node_modules 깔려있는 디렉토리 확인하고 거기에 설치. cd frontend 안 하고 전체에 설치하려는 멍청한 짓으로 2시간 가량 오류 잡다가 날림^^

picker를 사용하려면 코드는 다음과 같이 작성

import { Picker } from '@react-native-picker/picker';


const [category, setCategory] = useState('diary');

return (
	<Picker
		selectedValue = {category}
		onValueChange = {(itemValue, itemIndex) => 
		setCategory(itemValue)
		}
		style = {{
			width: 200,
			height: 50,
    	}}>
		<Picker.item label = 'Diary' value = 'diary' />
		<Picker.item label = 'Todo' value = 'todo' />
		<Picker.item label = 'Study' value = 'study' />
	</Picker>
);

그러나 이 picker는 커스텀하기도 힘들고 딱 밑으로 떨어지는 dropdown을 원했는데 약간 scroll 형식이라 옆에 글씨 놓고 디자인 맞추고 싶었던 나에겐 부적절. 그래서 찾은 게 아래의 picker.

react-native-dropdown-picker

npm install react-native-dropdown-picker

이거는 앞에 picker보다 개인적으로 디자인은 별로지만 커스텀이 쉽고 전반적으로 내가 원하던 디자인으로 페이지 구성할 수 있어서 선택.

CustomPicker라는 컴포넌트를 구성해, screen에서 불러와 설정할 수 있도록 했다.

import DropDownPicker from 'react-native-dropdown-picker';

const CustomPicker = ({ open, setOpen, value, setValue, items, setItems, onChangeValue, placeholder }) => {
    return (
        <DropDownPicker
            open = {open}
            value = {value}
            items = {items}
            setOpen = {setOpen}
            setValue = {setValue}
            setItems = {setItems}
            onChangeValue = {onChangeValue}
            containerStyle = {{
                width: 200,
            }}
            placeholder = {placeholder}
            dropDownDirection = "BOTTOM"
            style = {{
                marginBottom: open ? 100 : 10
            }}
            listItemContainerStyle = {{
                height: 30,
            }}
        />
    );
}

export default CustomPicker;

<CustomPicker
	open = {open}
	value = {category}
	items = {items}
	setOpen = {setOpen}	// true, false value
    setValue = {setCategory}
    setItems = {setItems}
    onChangeValue = {() => getIndex(category)}
    placeholder = "Select a category"
/>

setOpen을 사용한 이유는 open, close 상태에서 밑에 버튼의 위치를 다르게 주고 싶었기 때문이다.

근데 이거 defaultvalue 설정이 잘 안 된다.. 흠..