[React Native] react-native-dropdown-picker 사용

react-native-dropdown-picker 사용

드롭다운 메뉴를 선택하면 특정 컴포넌트가 나오는 기능을 구현하기 위해 react-native-picker를 사용해보았다.

// 라이브러리 설치
npm i react-native-dropdown-picker

학교지도를 보여주는 페이지를 구현중인데 드롭다운 메뉴로 층을 선택할 수 있게 하여 메뉴를 선택하면 해당 층의 지도가 보이도록 하였다.

Dropdown

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import {  WithLocalSvg } from 'react-native-svg';
import DropDownPicker from 'react-native-dropdown-picker';
··· 이미지 경로 ···

const MapTab = () => {
  // 드롭다운 열고 닫기
  const [open, setOpen] = useState(false);
  
  // 라이브러리에 기본값을 설정할 수 있는 defaultValue 속성이 없어졌다고 하여 value를 초기화할 때 기본값을 지정해주었다.
  const [value, setValue] = useState({label: '본관 1층', value: '1'});
  
  // 드롭다운 메뉴에 들어갈 아이템들 {label: '메뉴명', value: '값} 형태
  const [items, setItems] = useState([
     { label: '본관 1층', value: '1' },
     { label: '본관 2층', value: '2' },
     { label: '본관 3층', value: '3' },
     { label: '본관 4층', value: '4' },
     { label: '별관 지하 1층', value: '5' },
     { label: '별관 지하 2층', value: '6' },
     { label: '별관 1층', value: '7' },
     { label: '별관 2층', value: '8' },
  ]);
  
  // 현재 선택된 값
  const [currentValue, setCurrentValue] = useState(1);

  // 드롭다운 메뉴를 선택할 때마다 값 변경
  const onChange = (value, index) => {
    switch(value) {
      case '1': setCurrentValue(1); break;
      case '2': setCurrentValue(2); break;
      case '3': setCurrentValue(3); break;
      case '4': setCurrentValue(4); break;
      case '5': setCurrentValue(5); break;
      case '6': setCurrentValue(6); break;
      case '7': setCurrentValue(7); break;
      case '8': setCurrentValue(8); break;
      default: setCurrentValue(1);
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.dropdown_container}>
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          placeholder="본관 1층"
          setOpen={setOpen}
          setValue={setValue}
          setItems={setItems}
          maxHeight={400} // 옵션이 많으면 잘려서 나오는데, 이때 maxHeight를 사용하여 길이를 조절하면 된다.
          onChangeValue={onChange} // 값이 바뀔 때마다 실행
          listItemContainerStyle={styles.dropdown}
        />
      </View>
      
      // 현재 값에 따라 나올 컴포넌트를 변경하는 코드
      {currentValue === 1 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map1}></WithLocalSvg>
        </View>
      )}
      {currentValue === 2 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map2}></WithLocalSvg>
        </View>
      )}
      {currentValue === 3 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map3}></WithLocalSvg>
        </View>
      )}
      {currentValue === 4 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map4}></WithLocalSvg>
        </View>
      )}
      {currentValue === 5 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map5}></WithLocalSvg>
        </View>
      )}
      {currentValue === 6 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map6}></WithLocalSvg>
        </View>
      )}
      {currentValue === 7 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map7}></WithLocalSvg>
        </View>
      )}
      {currentValue === 8 && (
        <View>
          <WithLocalSvg width={350} height={500} asset={map8}></WithLocalSvg>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 40,
    backgroundColor: 'rgba(255, 255, 255, 1)'
  },
  // 드롭다운 메뉴를 열면 아래의 컴포넌트가 먼저 나와 메뉴들이 안 보이는 현상이 있었는데
  // DropDownPicker의 부모 요소에 zIndex를 주면 메뉴가 먼저 나오게 된다.
  dropdown_container: {
    marginTop: 24,
    zIndex: 1000
  },
  dropdown: {
    backgroundColor: '#fafafa'
  }
});

export default MapTab;

없어진 속성들이 많아 생각보다 자료를 찾는게 어려웠다🥺😥