如何使用 React Hooks 重写 React Native 的 TVEventHandler？答案

【问题标题】：How to rewrite the TVEventHandler of React Native using React Hooks?如何使用 React Hooks 重写 React Native 的 TVEventHandler？
【发布时间】：2020-03-23 11:37:31
【问题描述】：

在 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 部分。

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案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;
}

【讨论】：