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

Question

我目前正在开发一个 React Native 项目。我需要在 Instagram 上实现类似于“向下滑动关闭模态”的功能

Answer 1

我相信您正在使用@react-native-community/react-native-modal 包。在库文档中，您可以看到有一个名为 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};