无法使用滑动手势来拉出 material-ui 的抽屉组件

Question

我正在使用 0.16.4 material-ui 并试图让 Drawer 组件工作，但我无法让它工作。我自己无法弄清楚问题，作为一个新手，我不确定我能尝试什么。

import React from 'react';

import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Drawer from 'material-ui/Drawer';
import Chip from 'material-ui/Chip';

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      open: true
    }
  }
  render() {
    return (
      <MuiThemeProvider>
        <Drawer
          open={this.state.open}
          docked={false}
          onRequestChange={(o, r) => {
              console.log(o + " reason:" + r);
              this.setState({open: o});
          }}
          >
            <Chip>"one"</Chip>
            <Chip>"two"</Chip>
            <Chip>"three"</Chip>
        </Drawer>
      </MuiThemeProvider>
    );
  }
}

export default App;

反应：15.4.0， material-ui: 0.16.4, react-tap-event-plugin: 2.0.1

Answer 1

添加

react-tap-event-plugin package

和：

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

参见：the official docs

Answer 2

发现问题。在我的例子中，body 的长度为零，这就是无法识别滑动动作事件的原因。作为解决方法，我已经 body 占据了整个视口，现在抽屉工作正常。

无法使用滑动手势来拉出 material-ui 的抽屉组件

Unable to get swipe gesture work to pull out material-ui's Drawer component

reactjs

material-ui