javascript - 如何使用React Hooks重写React Native的TVEventHandler？

Question

在 React Native 中 documentation ，TVEventHandler的用法如下:

var TVEventHandler = require('TVEventHandler');

class Game2048 extends React.Component {
  _tvEventHandler: any;

  _enableTVEventHandler() {
    this._tvEventHandler = new TVEventHandler();
    this._tvEventHandler.enable(this, function(cmp, evt) {
      if (evt && evt.eventType === 'right') {
        cmp.setState({board: cmp.state.board.move(2)});
      } else if(evt && evt.eventType === 'up') {
        cmp.setState({board: cmp.state.board.move(1)});
      } else if(evt && evt.eventType === 'left') {
        cmp.setState({board: cmp.state.board.move(0)});
      } else if(evt && evt.eventType === 'down') {
        cmp.setState({board: cmp.state.board.move(3)});
      } else if(evt && evt.eventType === 'playPause') {
        cmp.restartGame();
      }
    });
  }

  _disableTVEventHandler() {
    if (this._tvEventHandler) {
      this._tvEventHandler.disable();
      delete this._tvEventHandler;
    }
  }

  componentDidMount() {
    this._enableTVEventHandler();
  }

  componentWillUnmount() {
    this._disableTVEventHandler();
  }

}

应该如何使用 React Hooks 重写这段代码？我无法弄清楚这一行: this._tvEventHandler.enable(this, function(cmp, evt) {，尤其是 this 部分。

Answer 1

我设法让它发挥作用，希望也能帮助你:

const App = () => {
  const _tvEventHandler = new TVEventHandler();

  const _enableTVEventHandler = () => {
    _tvEventHandler.enable(this, function (cmp, evt) {
      if (evt && evt.eventType === 'right') {
        console.log(evt.eventType);
      } else if (evt && evt.eventType === 'up') {
        console.log(evt.eventType);
      } else if (evt && evt.eventType === 'left') {
        console.log(evt.eventType);
      } else if (evt && evt.eventType === 'down') {
        console.log(evt.eventType);
      }
    });
  };

  const _disableTVEventHandler = () => {
    if (_tvEventHandler) {
      _tvEventHandler.disable();
    }
  }

  useEffect(() => {
    _enableTVEventHandler();
    return () => _disableTVEventHandler();
  });

  return null;
}