728x90
반응형
https://github.com/lawnstarter/react-native-picker-select
> 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
반응형
'리액트네이티브' 카테고리의 다른 글
[react-native] 컴포넌트의 크기를 지정할때 화면비율에 맞게 지정하는 간단한 방법 (362) | 2020.04.27 |
---|---|
[react-native] 이미지 슬라이더 / 현재 이미지 번호(index) 표시 (0) | 2020.04.22 |
[react-native] TextInput (0) | 2020.04.22 |
[react-native] 전화걸기 / 문자보내기 / 메일보내기 (0) | 2020.04.22 |
[react-native]아코디언 메뉴 만들기 (0) | 2020.04.22 |
댓글