- 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>
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>
)
}
github 문서 : https://github.com/react-native-picker/picker