带触摸模拟器的Hammerjs无法在React中工作

时间:2017-08-30 15:43:54

标签: javascript reactjs hammer.js

我一直试图在React中使用Hammerjs测试和模拟触摸事件,但浏览器和事件之间的行为极不一致。

让我们采用简单的代码:

import React from 'react';
import PropTypes from 'prop-types';
import Hammer from 'hammerjs';
import touchEmulator from 'hammer-touchemulator';

function testTap() {
  console.log('test zoom');
}

function testPinch() {
  console.log('test pinch');
}

class PDF extends React.Component {
  constructor(props) {
    super(props);
      touchEmulator();
      ...
  }

  componentDidMount() {
    this.hammer = Hammer(this.canvas);
    this.hammer.on('tap', testTap);
    this.hammer.get('pinch').set({ enable: true });
    this.hammer.on('pinch', testPinch);
  }

  ...
  render() {
    return (
      <div>
        <canvas
          ref={(canvas) => { this.canvas = canvas; }}
        />
      </div>
      );
    }
  }

我添加了触摸仿真器,因此我可以测试捏缩放。

所以这是我的问题:

  • 启用触控模拟器后,Tap无法正常工作,但在Chrome和Firefox中无法正常使用
  • 我尝试在Hammerjs's网站上进行缩放缩放,这适用于Firefox和Safari,但不适用于Chrome。当我在我的React应用程序中本地尝试时,它并不适用于任何这些。

有没有人有任何想法?

1 个答案:

答案 0 :(得分:0)

有类似的问题,因此将滑动切换为react-swipeable,但react-hammerjs留给水龙头。 同样,在搜索解决方案时,看到一篇文章提到有人说,从React 16.4开始,某些功能被禁用,您可以尝试降级React版本,然后检查是否是这种情况。