Question

我在ReactJS中创建了类似netflix的应用程序，我需要实现空间控制：您应该能够使用键盘箭头键（不是制表符）或游戏手柄通过当时聚焦一个元素来导航应用程序。

此应用程序可能会在任何设备（包括电视和平板电脑）上运行在webview中，因此无论我想使用什么浏览器本机解决方案，我都需要知道它是普遍支持的。

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

Answer 1

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

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

Answer 2

看看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>

Answer 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

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

3 个答案: