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

Posted 2023-02-16

【中文标题】如何像 instagram 一样实现模态向下滑动？

【英文标题】：How to implement modal swipe to down like instagram?

【发布时间】：2020-06-24 03:13:27

【问题描述】：

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

【问题讨论】：

github.com/nysamnang/react-native-raw-bottom-sheet

【参考方案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;