Как реализовать модальное перелистывание вниз как инстаграм?

Question

В настоящее время я работаю над проектом React Native. Мне нужно реализовать функцию, похожую на «Проведите вниз, чтобы закрыть модал» в Instagram

Answer 1

Я полагаю, что вы используете пакет @ реагировать-нативное сообщество / реагировать-нативный-модальный . В документах библиотеки вы можете видеть, что есть свойство с именем swipeDirection , которое является либо строкой, либо массивом, который может иметь один или несколько из следующих параметров; «Вверх», «Вниз», «Влево» или «Вправо».

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

Вот пример модального значения:

import React from 'react';
import {View, Text} from 'react-native;
import Modal from 'react-native-modal';

const ModalComponent = props => {
    const [isVisible, setIsVisible] = useState(true);

    return (
        <Modal isVisible={isVisible}
               swipeDirection="down"
               //swipeDirection={["up", "down", "left", "right"]}
               onSwipeComplete={(e) => { setIsVisible(false); })
               style={{ justifyContent: 'flex-end', margin: 0, }} >
            <View style={{ backgroundColor: 'steelblue' }}>
                <Text>Hello Modal</Text>
            </View>
        </Modal>
    );
};

export {ModalComponent};