反应 |材质-UI |滑动抽屉无法通过滑动打开答案

【问题标题】：React | Material-Ui | Swipeable Drawer not opening with swipe反应 |材质-UI |滑动抽屉无法通过滑动打开
【发布时间】：2020-08-26 22:36:10
【问题描述】：

我正在使用一个新应用程序并尝试创建一个“菜单”，因此当我从屏幕左侧滑动时它会打开。
在codeSandBox 上它可以工作。这是running example（在手机上运行）它对我有用，但是当我尝试在本地运行它时却没有。
它与我在代码框和本地的代码完全相同。

我注意到我的本地：

不同于codeandbox。代码沙盒有这部分。这个 React 没有写这部分是有原因的吗？

这是我的依赖项列表：

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.10.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"firebase": "^7.19.0",
"fontsource-roboto": "^3.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"

我错过了什么吗？我在文档中找不到它，因为它适用于代码框，我几乎可以肯定这是我的错在某个地方，但我似乎无法理解。提前致谢！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

有趣的是，当您从桌面更改为移动设备时，它可以工作，但不能从 chrome 的“iOS”设备“重新加载”。

它确实适用于其他模拟器，并且如果您从 web 更改为移动设备（并且 iOS 是预设的），它也可以工作。

我不知道这是否是预期的行为。即使使用文档中的特定行，它也不起作用。

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />

【讨论】：

【解决方案2】：

SwipableDrawer 不适用于 Drawer 的临时或永久变体。如果您删除该道具，它应该可以正常工作。

如果您需要隐藏背景，您可以这样做：

            <SwipeableDrawer
                sx={{
                    '& .MuiBackdrop-root': {
                        display: 'none',
                    },
                }}
                anchor="left"
                open={ sidebarOpen }
                onClose={ () => dispatch( toggleSidebar() ) }
                onOpen={ () => dispatch( toggleSidebar() ) }
                BackdropProps={{ invisible: true }}
            >
                content
            </SwipeableDrawer>

【讨论】：

【解决方案3】：

在 IOS 上默认禁用滑动打开。将 disableSwipeToOpen 属性设置为 false：

disableSwipeToOpen={false}

【讨论】：