[React-Native] react-native-picker-select 사용하여 Select Box 구현하기

select box

 

위 사진 처럼 선택 리스트를 만드는 방법을 구현해보겠습니다.

 

# react-native-picker-select

공식 Github : https://github.com/lawnstarter/react-native-picker-select

GitHub - lawnstarter/react-native-picker-select: 🔽 A Picker component for React Native which emulates the native <select> int

 

#(1) 패키지 설치

npm install react-native-picker-select
npm install @react-native-picker/picker

# IOS 
npx pod-install

 

#(2) 설정

공식 GitHub에 나온대로 진행하게 되면, 현재 애러가 발생합니다.

React-Native가 업그레이드 됨에 따라 추가로 적용해야하는 부분이 생겼다고합니다.

 

(1)

  "resolutions": {
    "react-native-picker-select/**/@react-native-picker/picker": "2.4.0"
  },

-package.json의 resolutions부분에 위 코드를 추가해주세요.

버젼은  npm install @react-native-picker/picker후 package.json에 적용된 버젼을 적어주시면 됩니다.(오른쪽 사진 참고)

 

(2)

react-native link @react-native-picker/picker

package.json 작성이 완료 되셨으면, 위 코드를 터미널에서 실행 해주세요.

 

(3)

dependencies {
	...
   implementation project(':@react-native-picker_picker')
   	...
   }

 

-android/app/bulid.gradle의 dependencies부분에 위 코드를 추가해주세요

 

(4)

./gradlew clean

- cd ./android로 폴더 위치 변경 후 위 코드를 실행,

yarn start -- --reset-cache

그리고 위 코드로 캐쉬초기화 후 다시 실행 해주세요.

watchman watch-del-all
rm -rf node_modules/ 
yarn cache clean 
yarn install 
yarn start -- --reset-cache

cd ./ios 
pod install

IOS 경우 위 코드를 순서대로 진행 후 Pod install 해주시면 됩니다.

 

 

#(3) 사용 코드

import RNPickerSelect from 'react-native-picker-select';

export const Dropdown = () => {
    return (
        <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={[
                { label: '전체', value: '전체' },
                { label: '진행중', value: '진행중' },
                { label: '마감', value: '마감' },
            ]}
        />
    );
};

onValueChange={(value) => console.log(value)}

onValueChange의 value는 

items={[
        { label: '전체', value: '전체' },
        { label: '진행중', value: '진행중' },
        { label: '마감', value: '마감' },
   	]}

items의 value 값이 들어 가게 됩니다.

이 부분과 렌더링을 이용하면, Select Box의 리스트 중 선택 될 때 마다, 화면이 바뀌게끔 구현할 수 있겠죠?

 

#(4) style Css

 

 

  useNativeAndroidPickerStyle={false}
  style={{
    placeholder: {color: 'gray'},
    inputAndroid: styles.input,
    inputAndroidContainer: styles.inputContainer,
    inputIOS: styles.input,
    inputIOSContainer: styles.inputContainer,
  }}

CSS는 IOS와 안드로이드 둘 다 적용해주셔야 합니다.

style={{}}안에 적용하고자 하는 style를 넣어주시면 됩니다.