리액트 네이티브 드롭다운 피커

npm install react-native-dropdown-picker

사용한 것 + 다큐멘테이션: https://hossein-zare.github.io/react-native-dropdown-picker-website/

React Native Dropdown Picker

기말 프로젝트로 리액트 네이티브를 사용해서 쇼핑 리스트를 만드려고 한다. 근데 욕심 상 drop down 형식으로 카테고리를 선택할 수 있게 하고 싶은데 어떻게 해야할 지 찾아보다가 이런게 있어서 사용해보려고 했다.

근데 자료+리액트에 대한 경험치가 부족..해서 배운것들을 여기에 정리해보려고 한다.

버전은 5.4

 

일단 설치는 터미널에서 아래를 입력하면 된다.

npm install react-native-dropdown-picker

주의할 점들

1. 드롭다운 컨테이너가 여러개일 때 꼭 하나의 드롭다운만 열려있는 상태가 되어야한다. 그 이유는 여러개가 열려있으면 오버랩이 될 수도 있다고 한다.

2. 아이템의 value는 unique해야한다. 만약 여러개의 같은 value가 있으면 항상 먼저 나와있는 value만 선택된다.

3. 드롭다운메뉴에 있는 containerStyle에 borderColor나 backgroundColor를 사용하면 터치할 수 없게 된다. 그래서 위의 스타일을 사용하는 것을 피해야 한다.

4. value와 item은 state variable(use state를 사용한 변수)로 만들어지지 않으면 제대로 동작하지 않는다.

사용 예제

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

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

여기서 만약 여러 아이템을 선택할 수 있게 하고 싶다면 속성에 multiple={true} min={원하는 min값} max={원하는 max값}을 추가하면 된다. 또한 이 외에도 추가로 사용할 수 있는 속성들(props)이 있는데 자세한 속성들은 위의 documentation을 참고하면 좋을 것 같다. 이 속성들은 모두 <DropDownPicker /> 내부에 쓰일 수 있는 것들이다.

 

여기까지가 documentation에 나와있는 것들이고 추가로 내가 필요해서 찾은 정보들은 아래와 같다.

drop down picker에 들어가는 item을 추가하고 싶을 때 어떻게 해야하는가

결론은 그냥 concat해서 setItem으로 다시 set하면 되는 거였다.

        <TouchableOpacity
          activeOpacity={0.8}
          onPress={() => {
            // concat array into items
            const added = labels.concat({ label: 'added', value: 'added' });
            // set item
            setLabels(added);
          }}
        >
          <Text> add into dropdown</Text>
        </TouchableOpacity>