如何在 Expo 中添加选择器 - Javascript

在 Expo 项目中，选择器是管理用户输入的常用工具。可以通过选择器，让用户从预定义的选项中选择一个或多个值。在本教程中，我们将介绍如何在 Expo 项目中添加选择器。

步骤

步骤1：安装所需的组件

在 Expo 项目中添加选择器，我们需要使用 React Native 组件库提供的 Picker 组件。因此，我们首先需要在项目中安装此组件：

expo install @react-native-picker/picker

步骤2：导入 Picker 组件

要在 Expo 项目中使用 Picker 组件，我们需要从 React Native 组件库中导入它：

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

步骤3：创建选择器

现在我们可以在 Expo 项目的任何组件中创建选择器。以下示例创建了一个 Picker ，允许用户从名为 fruits 的数组中选择一个值：

const fruits = [
  {label: 'Apple', value: 'apple'},
  {label: 'Banana', value: 'banana'},
  {label: 'Orange', value: 'orange'},
];

const [selectedFruit, setSelectedFruit] = useState('apple');

return (
  <View>
    <Text>Choose your favorite fruit:</Text>
    <Picker
      selectedValue={selectedFruit}
      onValueChange={(fruit) => setSelectedFruit(fruit)}
    >
      {fruits.map((fruit) => (
        <Picker.Item key={fruit.value} label={fruit.label} value={fruit.value} />
      ))}
    </Picker>
  </View>
);

步骤4：显示所选值

选择器通常用于收集用户输入并显示所选的值。以下示例显示了用户选择的水果名称：

<Text>You chose: {selectedFruit}</Text>

结论

选择器是 Expo 项目中非常有用的工具，可以方便地收集用户输入。在本教程中，我们了解了如何使用 React Native 组件库提供的 Picker 组件，在 Expo 项目中添加选择器，并获得所选项的值。