React native 선택 컴포넌트 - Picker

citron03·2022년 10월 24일
0

React Native

목록 보기
7/7
  • Picker는 여러 선택지에서 하나를 사용자가 선택할 수 있도록 돕는 UI이다.
  • 라이브러리를 사용하여 리액트 네이티브에서 손쉽게 이를 구현할 수 있다.
  • import { Picker } from '@react-native-picker/picker';
// 설치하기
$ npm install @react-native-picker/picker --save

or

$ yarn add @react-native-picker/picker
  • 기본적인 구조는 다음과 같다.

<Picker>
	<Picker.Item label="라벨_1" value="값_1" />
	<Picker.Item label="라벨_2" value="값_2" />
	<Picker.Item label="라벨_3" value="값_3" />
</Picker>
  • state와 연결되면 다음과 같다.

import React, { useState } from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const PickerComponent = () => {
	const [pickerValue, setPickerValue] = useState("1");
    
    return (
    	<SafeAreaView>
			<Picker
            	selectedValue={pickerValue}
                onValueChange={(item) => setPickerValue(item)}
            >
				<Picker.Item label="라벨_1" value="1" />
				<Picker.Item label="라벨_2" value="2" />
				<Picker.Item label="라벨_3" value="3" />
			</Picker>        
        	<View>
            	<Text>{pickerValue}</Text>
            </View>
        </SafeAreaView>
    )
}
  • label 속성은 화면에 보여지는 값이고, value 속성은 실제 데이터를 의미한다.

github 문서 : https://github.com/react-native-picker/picker

profile
🙌🙌🙌🙌

0개의 댓글