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); 
    }