본문 바로가기
리액트네이티브

[react-native]셀렉트 박스

by 알찬 퍼블리셔 2020. 5. 22.
728x90
반응형

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

 

lawnstarter/react-native-picker-select

🔽 A Picker component for React Native which emulates the native

 

 > npm i react-native-picker-select

 

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

 

 

<RNPickerSelect
  value={기본값}
  onOpen={() => { // 선택창이 열릴때
    Keyboard.dismiss(); //키보드 내림
  }}
  onValueChange={(value, index) => {
    값이 바뀔때 (바뀐 값 value )
  }}
  items={(() => //선택할수 있는 값들
   this.state.sdList.map((sd) => ({  // state에 저장한 리스트를 불러와 label 값과 value 값을 준다.
       label: sd,
       value: sd,
  })))()}
  useNativeAndroidPickerStyle={false} // 안드로이드 기본 스타일을 사용할 것인지 
  placeholder={{  // 값이 없을때 보일 값, 없어도 된다면 이 안의 내용을 지운다. placeholder={{}} 이건 남겨둠.. 이부분까지 지우면 기본값으로 설정됨.
   label: '시/도',
    value: null,
  }}
  style={{ // 스타일은 아래 3가지로 나누어 적용한다 
    placeholder: style.sel_placeholder,
    inputAndroid: style.sel_inputAnd,
    inputIOS: style.sel_inputIOS,
  }}
 />
728x90
반응형

댓글