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

Question

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

这个应用程序可能会在任何设备上运行，包括电视和平板电脑，所以无论浏览器本地解决方案我想用我需要知道的肯定是普遍支持。

是否有一个reactjs库或HTML5 Api，使用游戏板和键盘箭头键提供跨浏览空间导航？

Answer 1

看看https://github.com/dead/react-js-spatial-navigation 它是围绕JS-空间导航的包装。我在一个测试电视应用程序中使用它，它工作得很好！它仍然缺少一个示例和文档，但它非常简单。

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

你可以Mousetrap.js绑定和解除与箭头键的任何行动，你需要执行使用生命周期钩componentDidMount和componentWillUnmount。

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