React Native 选择器组件

React Native 选择器组件是 React Native 框架中的一个重要组件，它可以让程序员方便地在移动应用程序中添加选择器功能，以达到更好的用户交互体验。本文将介绍一些常见的 React Native 选择器组件，并提供示例代码和使用说明。

1. Picker

Picker 是 React Native 原生组件中的一个选择器组件，它可以用来选择一组预定义的值。Picker 组件的使用非常简单，只需要通过传递值数组和相应的事件处理函数即可完成。

import React, { useState } from 'react';
import { View, Text, Picker } from 'react-native';

const PickerExample = () => {
  const [selectedValue, setSelectedValue] = useState("java");
  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
      <Text>You selected: {selectedValue}</Text>
    </View>
  );
}

在上面的示例代码中，我们定义了一个 Picker 组件，并传入了两个 Picker.Item 组件作为子节点。Picker.Item 组件代表 Picker 可以选择的值，它包含了 label 属性和 value 属性，它们分别代表了 Picker.Item 的显示文本和对应的值。

在组件渲染后，当用户选择了某个 Picker.Item 时，onValueChange 事件处理函数将被触发，从而更新 selectedValue 状态的值。完成状态更新后，页面会重新渲染，显示用户选择的项目名称。

2. ModalPicker

ModalPicker 是一个基于 Picker 的弹出选择器组件，可以实现在普通页面中弹出选择器以供用户选择，然后将选择的值返回给调用方。

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import ModalPicker from 'react-native-modal-picker';

const ModalPickerExample = () => {
  const data = [
    { key: 0, label: 'Java' },
    { key: 1, label: 'JavaScript' },
  ];
  const [selectedValue, setSelectedValue] = useState("");
  const [modalVisible, setModalVisible] = useState(false);
  
  const showPicker = () => {
    setModalVisible(true);
  }
  
  const hidePicker = () => {
    setModalVisible(false);
  }
  
  const onValueChange = (option) => {
    setSelectedValue(option.label);
    hidePicker();
  }
  
  return (
    <View>
      <TouchableOpacity onPress={showPicker}>
        <Text>Choose One</Text>
        <Text>{selectedValue}</Text>
      </TouchableOpacity>
      <ModalPicker
        data={data}
        visible={modalVisible}
        onValueChange={onValueChange}
        onHide={hidePicker}
      />
    </View>
  );
}

在上面的示例代码中，我们使用 ModalPicker 组件来实现选择器的功能。ModalPicker 组件需要传递以下参数：

• data：选择器提供的可选项数据，每个选项具有 label 和 key 两个属性。
• visible：选择器的可见性。
• onValueChange：选择器选项变化事件处理函数，在选择器的值发生变化时触发。
• onHide：选择器隐藏事件处理函数，在选择器隐藏后触发。

在组件渲染后，当用户点击“Choose One”文本时，showPicker 事件处理函数将被触发，从而显示 ModalPicker 组件。当用户选择了某一个选项时，onValueChange 事件处理函数将被触发，从而更新 selectedValue 状态的值，然后隐藏 ModalPicker 组件。

3. WheelPicker

WheelPicker 是一个可以让用户通过滚动手势来选择项目的选择器组件，也叫滚轮选择器。它可以在滚动视图中显示多个可选项，并根据用户的滚动手势来定位和切换到正确的选项位置。

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import WheelPicker from 'react-native-wheel-picker';

const WheelPickerExample = () => {
  const data = [
    'Java', 'JavaScript', 'Python', 'Ruby', 'PHP', 'C++', 'C#',
    'Perl', 'Swift', 'Kotlin', 'Objective-C', 'Go', 'Rust', 'Scala'
  ];
  const [selectedValue, setSelectedValue] = useState(data[0]);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const onItemSelected = (value, index) => {
    setSelectedValue(value);
    setSelectedIndex(index);
  }
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>Choose your preferred language:</Text>
      <WheelPicker
        data={data}
        selectedItem={selectedValue}
        onItemSelected={onItemSelected}
        itemStyle={{ fontSize: 26, color: 'gray' }}
        wrapperStyle={{ height: 150, width: 200 }}
      />
      <Text style={{ fontSize: 36, fontWeight: 'bold' }}>{selectedValue}</Text>
    </View>
  );
}

在上面的示例代码中，我们使用 WheelPicker 组件来实现滚轮选择器的功能。WheelPicker 组件需要传递以下参数：

• data：选择器提供的可选项数据，数据类型为字符串数组。
• selectedItem：设置选择器的默认选择项。
• onItemSelected：选项变化事件处理函数，在选择器的值发生变化时触发。
• itemStyle：选择器选项的样式。
• wrapperStyle：选择器的外容器样式。

在组件渲染后，当用户滑动滚轮选择器时，onItemSelected 事件处理函数将被触发，从而更新 selectedValue 状态的值，然后重新渲染页面，显示用户选择的项目名称。

4. Conclusion

React Native 选择器组件是构建移动应用程序的必备工具，在提升用户交互体验方面有巨大的作用。在本文中，我们介绍了 React Native 中的三种常见选择器组件：Picker、ModalPicker 和 WheelPicker，并提供了示例代码和使用说明。将这些组件应用到你的项目中，可以让你的应用程序拥有更好的用户交互体验和更高的品质。