The picker in React native is a default component and is used to develop a dropdown box which pulls down several options when clicked and allows a user to choose a particular option.

React native中的选择器是默认组件，用于开发一个下拉框，单击该下拉框可下拉多个选项，并允许用户选择特定选项。

From the term "Picker", the word simply means it provides a way to pick an item from several alternatives.

从术语“选择器”开始 ，该词仅表示它提供了一种从多种选择中选择项目的方法。

To add the picker component in your app is not complex but just to follow the rules and syntax.

在应用程序中添加选择器组件并不复杂，仅需遵循规则和语法即可。

Firstly, we always begin by importing the component from react-native, then calling it in the body of our code as seen below.

首先，我们总是从从react-native导入组件开始，然后在代码主体中调用它，如下所示。

In your App.js File, type the following,

在您的App.js文件中，键入以下内容，

import * as React from 'react';import {
    Text, View, StyleSheet, Picker } from 'react-native';export default class App extends React.Component {
     state = {
   choice:' '};    render (){
       return (      
          
     
       Please select an item 
           
     
          this.setState({
   choice: itemValue})  }>  
        
      
         
     
      {
   this.state.choice}
     
        );  }}const styles = StyleSheet.create({
     container:{
       flex: 1,    backgroundColor: 'skyblue',    alignItems: 'center',    justifyContent: 'center'  }});

Output

输出量

From the code above, the picker is called using the picker opening and closing tag. In this example, the picker was called with some attributes like style, which is used for styling and the attribute onValueChange which acts like the event which gets executed when an option is selected.

从上面的代码中，使用选择器的打开和关闭标签调用选择器。 在此示例中，使用一些属性(如样式)和样式属性onValueChange (如选择一个选项时将执行的事件)来调用选择器。

The onValueChange attribute takes 2 parameters which are,

onValueChange属性采用2个参数，分别是

• itemValue : which is the value property of the item selected.

  itemValue：这是所选项目的value属性。

• itemValue or itemPosition which is the index of the selected item (according to the documentation).

  itemValue或itemPosition是所选项目的索引(根据文档)。

The function in the onValueChange attribute is called when a choice is picked in which it's setState in our case.

当选择一个在本例中为setState的选项时，将调用onValueChange属性中的函数。

selectedValue attribute simply displays the item that is selected by default.

selectedValue属性仅显示默认情况下选中的项目。

Mode attribute simply provides the mode of display when the picker is clicked.

模式属性仅提供单击选择器时的显示模式。

Finally, Picker.label is used to display the various items or alternatives in the picker.

最后， Picker.label用于显示选择器中的各个项目或替代项。

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感谢您与我编码！ 下次见。 随意发表评论或问题。 上帝祝福你！

翻译自: