Как сделать модальное окно с прокруткой значений, примерно как при установки будильника?

Для создания модального окна с прокручиваемыми значениями в React Native, вы можете использовать компонент "Modal" для отображения модального окна, а компонент "ScrollView" для добавления прокручиваемого списка значений.

Вот пример кода, который демонстрирует, как создать такое модальное окно:

1. Сначала, установите "Modal" и "ScrollView" компоненты, если они еще не установлены, с помощью npm или yarn.

npm install react-native-modal
npm install @react-native-community/datetimepicker

2. Затем, импортируйте требуемые компоненты в вашем файле:

import React, { useState } from "react";
import { View, Text, TouchableOpacity, Modal, ScrollView } from "react-native";

3. Теперь, вместе с вашими другими компонентами, создайте кнопку, которая открывает модальное окно:

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const handleOpenModal = () => {
    setModalVisible(true);
  };

  const handleCloseModal = () => {
    setModalVisible(false);
  };

  return (
    <View>
      <TouchableOpacity onPress={handleOpenModal}>
        <Text>Open Modal</Text>
      </TouchableOpacity>

      <Modal
        visible={modalVisible}
        onRequestClose={handleCloseModal}
        animationType="slide"
      >
        <View>
          <TouchableOpacity onPress={handleCloseModal}>
            <Text>Close Modal</Text>
          </TouchableOpacity>

          <ScrollView>
            {/* Здесь вы можете отобразить список значений */}
          </ScrollView>
        </View>
      </Modal>
    </View>
  );
};

export default App;

4. Внутри компонента модального окна вы можете использовать компонент "ScrollView" для отображения списка значений, которые можно прокручивать. Вы можете заполнить его данными или компонентами по вашему усмотрению, например:

<ScrollView>
  <TouchableOpacity onPress={handleOptionPressed}>
    <Text>Option 1</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={handleOptionPressed}>
    <Text>Option 2</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={handleOptionPressed}>
    <Text>Option 3</Text>
  </TouchableOpacity>
  {/* ..и так далее */}
</ScrollView>

5. Наконец, добавьте функционал для открытия и закрытия модального окна с помощью функций "handleOpenModal" и "handleCloseModal". Вы также можете добавить обработчики событий для обработки выбранных значений или другой логики в вашем приложении.

Таким образом, вы сможете создать модальное окно с прокручиваемыми значениями, похожее на модальное окно установки будильника. Вы можете настроить его под вашу конкретную потребность, добавляя любую дополнительную логику или стилизацию по своему усмотрению.