React 기본 선택기 구성 요소는 주어진 여러 옵션에서 값을 선택할 수 있는 드롭다운과 유사합니다.
기본 Picker 구성 요소는 다음과 같습니다 -
<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}>
<Picker.Item label = "ItemLabel" value = "ItemValue" />
...
...
...
<Picker.Item label = "ItemLabel" value = "ItemValue" />
</Picker> 선택기 구성 요소를 사용하려면 다음과 같이 먼저 react-native에서 가져와야 합니다. -
import { Picker } from 'react-native' 선택기 속성
| Sr.No | 소품 및 설명 |
|---|---|
| 1 | 활성화됨 부울 값이 필요합니다. tofalse로 설정하면 선택기가 비활성화되고 사용자가 항목을 선택할 수 없습니다. |
| 2 | 항목 스타일 아이템에 적용할 스타일링. |
| 3 | 모드 이 속성은 선택기의 항목을 표시하는 방법을 결정합니다. 사용 가능한 옵션은 대화 상자 및 드롭다운입니다. 대화 모드인 경우 선택기 항목이 모달 대화 상자에 표시됩니다. 드롭다운이면 일반 드롭다운 모드처럼 표시됩니다. |
| 4 | onValueChange 선택기에서 항목이 선택될 때 호출될 콜백 함수입니다. 사용 가능한 매개변수는 itemValue(선택된 실제 값)와 itemPosition(항목의 인덱스 위치)입니다. |
| 5 | 선택된 값 선택기에서 선택한 값입니다. |
예:ReactNative에서 Picker를 사용한 드롭다운 표시
이 예는 Picker 구성요소를 사용한 드롭다운을 보여줍니다.
코드는 다음과 같습니다 -
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
<Picker.Item label = "Steve" value = "steve" />
<Picker.Item label = "Ellen" value = "ellen" />
<Picker.Item label = "Maria" value = "maria" />
</Picker> Picker Steve, Ellen 및 Maria에게 주어진 3가지 값이 있습니다. 다음은 이를 표시하는 완전한 코드입니다.
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class PickerExample extends Component {
state = {user: ''}
updateUser = (user) => {
this.setState({ user: user })
}
render() {
return (
<View>
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
<Picker.Item label = "Steve" value = "steve" />
<Picker.Item label = "Ellen" value = "ellen" />
<Picker.Item label = "Maria" value = "maria" />
</Picker>
<Text style = {styles.text}>{this.state.user}</Text>
</View>
)
}
}
export default PickerExample
const styles = StyleSheet.create({
text: {
fontSize: 30,
alignSelf: 'center',
color: 'red'
}
}) this.state.user 선택기 제어에 사용됩니다. 사용자가 선택되면 updateUser 함수가 트리거됩니다.
출력
선택기에서 이름을 열면 아래와 같이 표시되어야 합니다. -
