如何像 instagram 一样实现模态向下滑动？

Question

我目前正在做一个 React Native 项目。我需要在 Instagram

上实现类似于 "Swipe Down To close Modal" 的功能

Answer 1

我相信您正在使用 @react-native-community/react-native-modal 软件包。在库文档中，可以看到有一个叫做swipeDirection的属性，它可以是一个字符串，也可以是一个数组，可以是以下一个或多个选项； 'up'、'down'、'left' 或 '对。

您还可以使用 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};

如何像 instagram 一样实现模态向下滑动？

How to implement modal swipe to down like instagram?

react-native

react-native-modal