Селектор раскрывающегося списка — важный компонент многих мобильных приложений, позволяющий пользователям выбирать из списка вариантов. В React Native библиотека @react-native-picker/picker предоставляет мощное и гибкое решение для реализации селекторов раскрывающихся списков. В этой статье мы рассмотрим различные методы использования @react-native-picker/picker, дополненные разговорными объяснениями и примерами кода.

Метод 1: базовый селектор раскрывающегося списка
Давайте начнем с самой простой реализации селектора раскрывающегося списка с использованием @react-native-picker/picker. Для начала нам нужно установить библиотеку с помощью команды:

yarn add @react-native-picker/picker

После установки мы можем импортировать необходимые компоненты и использовать их в нашем коде:

import React, { useState } from 'react';
import { View } from 'react-native';
import { Picker } from '@react-native-picker/picker';
const MyDropdownSelector = () => {
  const [selectedValue, setSelectedValue] = useState('');
  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="Option 1" value="option1" />
        <Picker.Item label="Option 2" value="option2" />
        <Picker.Item label="Option 3" value="option3" />
      </Picker>
    </View>
  );
};
export default MyDropdownSelector;

В этом примере мы используем компонент Pickerиз @react-native-picker/picker. Переменная состояния selectedValueотслеживает выбранную опцию, а обратный вызов onValueChangeсоответствующим образом обновляет выбранное значение.

Метод 2: предварительный выбор параметра
Иногда нам нужно предварительно выбрать параметр в раскрывающемся списке. Мы можем добиться этого, установив начальное значение переменной состояния selectedValue:

const [selectedValue, setSelectedValue] = useState('option2');

Благодаря этому изменению «Вариант 2» будет выбран по умолчанию при отображении раскрывающегося списка.

Метод 3: динамические параметры
В некоторых случаях параметры в раскрывающемся списке выбора могут потребоваться динамически генерировать. Мы можем добиться этого, сопоставив массив параметров с Picker.Itemкомпонентами:

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];
// Inside the component
<Picker
  selectedValue={selectedValue}
  onValueChange={(itemValue) => setSelectedValue(itemValue)}
>
  {options.map((option) => (
    <Picker.Item key={option.value} label={option.label} value={option.value} />
  ))}
</Picker>

В этом примере параметры хранятся в массиве объектов. Мы динамически отображаем Picker.Itemкомпонентов на основе массива параметров.

В этой статье мы рассмотрели различные методы использования библиотеки @react-native-picker/picker для реализации селекторов раскрывающихся списков в React Native. Мы рассмотрели базовое использование, параметры предварительного выбора и параметры динамического создания. Освоив эти методы, вы сможете создавать универсальные и удобные селекторы раскрывающихся списков в своих приложениях React Native.

Не забудьте установить @react-native-picker/picker с помощью yarn add @react-native-picker/picker, и вы сразу же приступите к реализации мощных селекторов раскрывающихся списков!