React Native 中使用 react-native-elements 实现 Picker 组件

在 React Native 中，Picker 是一个常用的组件，可以用于选择一组预定义的选项。在这篇文章中，我们将介绍如何使用 react-native-elements 库来实现 Picker 组件，同时提供详细的示例代码和指导意义。

安装 react-native-elements

在开始之前，需要先安装 react-native-elements。可以使用 npm 进行安装：

npm install react-native-elements

使用 react-native-elements 的 Picker 组件

在 react-native-elements 中，Picker 组件是一个封装了原生 Picker 的高阶组件。它提供了一些额外的功能，如自定义样式、多项选择、默认值等。

首先，需要导入 Picker 组件：

import { Picker } from 'react-native-elements';

然后，可以在组件中使用 Picker：

// javascriptcn.com 代码示例
<Picker
  selectedValue={this.state.selectedValue}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({selectedValue: itemValue})
  }>
  <Picker.Item label="Option 1" value="option1" />
  <Picker.Item label="Option 2" value="option2" />
  <Picker.Item label="Option 3" value="option3" />
</Picker>

在上面的代码中，我们创建了一个 Picker 组件，并设置了三个选项。selectedValue 属性指定了当前选中的值，onValueChange 属性则用于监听选中值的变化。

自定义样式

react-native-elements 的 Picker 组件允许自定义样式。可以使用 style 属性来设置 Picker 的样式，同时也可以通过 itemStyle 和 textStyle 属性来设置选项的样式。

// javascriptcn.com 代码示例
<Picker
  style={{backgroundColor: 'white', borderRadius: 4}}
  itemStyle={{backgroundColor: 'white'}}
  textStyle={{color: 'black'}}
  selectedValue={this.state.selectedValue}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({selectedValue: itemValue})
  }>
  <Picker.Item label="Option 1" value="option1" />
  <Picker.Item label="Option 2" value="option2" />
  <Picker.Item label="Option 3" value="option3" />
</Picker>

在上面的代码中，我们设置了 Picker 的背景色和圆角，同时也设置了选项的背景色和文字颜色。

多项选择

如果需要实现多项选择，可以将 Picker 的 mode 属性设置为 'dropdown'，然后通过 selectedValue 属性来指定选中的值。

// javascriptcn.com 代码示例
<Picker
  mode="dropdown"
  selectedValue={this.state.selectedValues}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({selectedValues: [...this.state.selectedValues, itemValue]})
  }>
  <Picker.Item label="Option 1" value="option1" />
  <Picker.Item label="Option 2" value="option2" />
  <Picker.Item label="Option 3" value="option3" />
</Picker>

在上面的代码中，我们设置了 Picker 的 mode 属性为 'dropdown'，并将 selectedValue 属性设置为数组。当选中一个选项时，我们将其值添加到数组中。

默认值

如果需要设置 Picker 的默认值，可以将 selectedValue 属性设置为所需的值。

// javascriptcn.com 代码示例
<Picker
  selectedValue={this.state.selectedValue}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({selectedValue: itemValue})
  }>
  <Picker.Item label="Option 1" value="option1" />
  <Picker.Item label="Option 2" value="option2" />
  <Picker.Item label="Option 3" value="option3" />
</Picker>

在上面的代码中，我们将 selectedValue 属性设置为组件的状态值，从而实现了默认值的设置。

总结

在本文中，我们介绍了如何使用 react-native-elements 库来实现 Picker 组件。我们讨论了如何自定义样式、实现多项选择以及设置默认值。希望这篇文章能够帮助你更好地使用 React Native 开发应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65670217d2f5e1655dfebf83