ReactJS：处理空间导航（键盘和游戏手柄）[关闭]

Posted 2023-03-15

【中文标题】ReactJS：处理空间导航（键盘和游戏手柄）[关闭]

【英文标题】：ReactJS: Handle Spatial Navigation (Keyboard and Gamepad) [closed]

【发布时间】：2017-10-11 17:10:06

【问题描述】：

我正在 ReactJS 中创建这个类似 netflix 的应用程序，我需要实现空间控制：您应该能够使用键盘箭头键（而不是选项卡）或游戏板通过同时聚焦一个元素来导航应用程序。

此应用程序可能在任何设备（包括电视和平板电脑）上以 web 视图运行，因此无论我想使用何种浏览器原生解决方案，我都需要确定是否受到普遍支持。

是否有 reactjs 库或 html5 Api 使用游戏手柄和键盘箭头键提供跨浏览空间导航？

【问题讨论】：

请edit 在此处添加有意义的代码和问题描述。发布证明您的问题的minimal reproducible example 将帮助您获得更好的答案。谢谢！

我无法发布示例，因为这是与我正在处理的特定代码无关的广泛问题。但我让我的问题更加直接和具体。

【参考方案1】：

看看https://github.com/dead/react-js-spatial-navigation 它是 js-spatial-navigation 的包装器。我在测试电视应用程序中使用了它，效果很好！它仍然缺少示例和文档，但它非常简单。

<SpatialNavigation>
 // your components here
 // for a focusable content you can just wrapper it around the
 <Focusable onFocus=event => this.onFocusFunction(event) onUnfocus=event => this.onUnfocusFunction(event)>
     // Your focusable content here
 </Focusable>
 // more components
</SpatialNagivation>

【参考方案2】：

您可以Mousetrap.js 使用箭头键绑定和取消绑定您需要使用生命周期挂钩componentDidMount 和componentWillUnmount 执行的任何操作。

 componentDidMount() 
        Mousetrap.bind(theArrowKeyToBind, () => theActionToPerform);
    
    componentWillUnmount() 
        Mousetrap.unbind(theArrowKeyToBind, () => theActionToPerform);
    

【参考方案3】：

你应该在你的应用程序中寻找除 angularJS 或 ReactJS 库之外的抽象东西来进行空间导航。只需浏览下面的库并在 GitHub 中查看给定的示例。 NaviboardJS

它使用简单。在项目中包含导航板，并为所需元素提供可导航的类，并将其包含在具有某些 id 的其他元素中。即 ParentElementID。检查以下例如

<div class="wrapper" id='ParentElementID'>
  <div class="box navigable">A</div>
  <div class="box navigable">B</div>
  <div class="box navigable">C</div>
  <div class="box navigable">D</div>
  <div class="box navigable">E</div>
</div>

然后从您的脚本中调用 API：

naviBoard.setNavigation('ParentElementID')

视图将是可导航的，并且可以通过键盘箭头键访问。

库还为其他用例提供了其他有前途的 API。

查看示例链接：

https://jsfiddle.net/amanboss9/zv5hocxq/2/embedded/result

【讨论】：

最新编辑的还不够吗？它现在确实有使用说明和示例小提琴。不确定它是否仍然应该无缘无故地被否决。