React Native Picker是用于从多项选择中选择一个项目的组件。这与下拉菜单选项相同。当我们需要提供多种选择以供选择时，可以使用Picker。
通过从react-native库中导入Picker组件来使用它。
Picker属性
| Prop | Description |
|---|---|
| onValueChange( itemValue, itemPosition) | 这是一个回调属性，在选择一个项目时会调用它。它带有两个参数(itemValue:选定的项目，itemPosition：选定项目的位置)。 |
| selectedValue | 返回所选值。 |
| style | picket样式。 |
| testID | 用于在端到端测试中定位。 |
| enabled | 这是一个布尔属性，当设置为false时，会使disable。如果将其设置为false，则用户将无法进行选择。 |
| mode | 在Android上，它指定当用户单击选择器时如何显示选择项。它具有“dialog”和“dropdown”属性。 |
| prompt | 它在Android中以对话框模式用作对话框的标题。 |
| itemStyle | 它为选择器标签的每个项目设置样式。 |
Picker示例
在此示例中，我们在Picker组件中创建三个标签项。从选择器中选择项目后，它将调用onValueChange回调并在选择器中设置所选项目。从itemPosition中读取项目的索引。该项目的位置显示在“Text”组件中。
App.js
import React, { Component } from react
import {StyleSheet,View, Text,Picker} from react-native
export default class SwitchExample extends Component {
state = {
choosenIndex: 0
};
render</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln">
</span><span class="pun"><</span><span class="typ">View</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">container</span><span class="pun">}></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">textStyle</span><span class="pun">}></span><span class="typ">Picker</span><span class="pln"> </span><span class="typ">Example</span><span class="pun"></</span><span class="typ">Text</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Picker</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">pickerStyle</span><span class="pun">}</span><span class="pln">
selectedValue</span><span class="pun">={</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">language</span><span class="pun">}</span><span class="pln">
onValueChange</span><span class="pun">={(</span><span class="pln">itemValue</span><span class="pun">,</span><span class="pln"> itemPosition</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln">
</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">setState</span><span class="pun">({</span><span class="pln">language</span><span class="pun">:</span><span class="pln"> itemValue</span><span class="pun">,</span><span class="pln"> choosenIndex</span><span class="pun">:</span><span class="pln"> itemPosition</span><span class="pun">})}</span><span class="pln">
</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Picker</span><span class="pun">.</span><span class="typ">Item</span><span class="pln"> label</span><span class="pun">=</span><span class="str">"Java"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"java"</span><span class="pln"> </span><span class="pun">/></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Picker</span><span class="pun">.</span><span class="typ">Item</span><span class="pln"> label</span><span class="pun">=</span><span class="str">"JavaScript"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"js"</span><span class="pln"> </span><span class="pun">/></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Picker</span><span class="pun">.</span><span class="typ">Item</span><span class="pln"> label</span><span class="pun">=</span><span class="str">"React Native"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"rn"</span><span class="pln"> </span><span class="pun">/></span><span class="pln">
</span><span class="pun"></</span><span class="typ">Picker</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">textStyle</span><span class="pun">}></span><span class="pln"> </span><span class="pun">{</span><span class="str">"Index ="</span><span class="pun">+</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">choosenIndex</span><span class="pun">}</</span><span class="typ">Text</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="typ">View</span><span class="pun">></span><span class="pln">
</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
}
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: center,
justifyContent: center,
},
textStyle:{
margin: 24,
fontSize: 25,
fontWeight: bold,
textAlign: center,
},
pickerStyle:{
height: 150,
width: "80%",
color: #344953,
justifyContent: center,
}
})
输出:
