如何在React Native中使用Picker选择器

前端

2023-09-06 02:00:05

Picker组件：创建各种选择器的强大工具

什么是Picker组件？

Picker组件是一个UI库，允许用户从一系列选项中选择一个或多个值。它广泛用于创建下拉菜单、单选按钮组和多选复选框。

Picker组件属性

Picker组件拥有以下关键属性：

selectedValue： 当前选定的值
onValueChange： 值更改时调用的回调函数
items： 要显示的选项列表。每个选项包含以下属性：
- label： 要显示的文本
- value： 选择时要返回的值

使用Picker组件

要使用Picker组件，首先需要将其导入到React Native应用程序中：

import {Picker} from 'react-native';

然后，您可以在应用程序中使用Picker组件。以下代码示例创建一个下拉菜单，允许用户选择一种水果：

<Picker
  selectedValue={this.state.fruit}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({fruit: itemValue})
  }>
  <Picker.Item label="Apple" value="apple" />
  <Picker.Item label="Banana" value="banana" />
  <Picker.Item label="Orange" value="orange" />
</Picker>

创建多级选择器

Picker组件还可以用于构建多级选择器。为此，您需要使用嵌套的Picker组件。以下代码创建一个多级选择器，允许用户选择国家和城市：

<Picker
  selectedValue={this.state.country}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({country: itemValue})
  }>
  <Picker.Item label="United States" value="us" />
  <Picker.Item label="Canada" value="canada" />
</Picker>
<Picker
  selectedValue={this.state.city}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({city: itemValue})
  }>
  {this.state.country === 'us' && (
    <>
      <Picker.Item label="New York" value="new_york" />
      <Picker.Item label="Los Angeles" value="los_angeles" />
    </>
  )}
  {this.state.country === 'canada' && (
    <>
      <Picker.Item label="Toronto" value="toronto" />
      <Picker.Item label="Vancouver" value="vancouver" />
    </>
  )}
</Picker>