react TV端焦點移動外掛 react-tv-focusable

npm
文件

安裝

npm i -S react-tv-focusable

tv.js元件中的html(css有點多，此處就不寫了)：

    render(){
        const  lists = [];
        for(let i=0;i< this.list.length;i++) {
            const item = this.list[i],index = i;
            lists.push(<div className="item  r-focusable"
             key={i} index={i}
             style={{
                 left: -100 * index - index * 20 +'px',
                 zIndex: this.state.activeIndex === index ? 1100 :1000-Math.abs(this.state.activeIndex - index) * 5,
                 transform: `rotateY(${this.state.activeIndex < index ? '-30deg':this.state.activeIndex === index?'0deg':'30deg'}) scale(${1-Math.abs(this.state.activeIndex - index)*0.05})`,
                }}>
              <img src={item.url}/>
              <span className="txt">{item.title}</span>
            </div>)
        }
        return (
            <div className="tv-box">
            <div className="item-box">
              <div className="perspective"> {lists} </div>
            </div>
            <div className="bottom-img"><img src="../common/images/tv/r-menu.png"/></div>
          </div>
        )
    }
 

tv.js元件中的互動

 componentDidMount() {
   	$tv.init({
         focusableClassName:'r-focusable', // 必須配置項
         distanceToCenter:true
     })
     $tv.setScrollEl(document.querySelector('.item-box'))
     $tv.requestFocus($tv.getElementByPath("//div[@class='perspective']/div[3]"));
     const els = document.querySelectorAll('.r-focusable');
     for(let el of els) {
         el.addEventListener("right", this.right.bind(this));
         el.addEventListener("left", this.left.bind(this));
         el.addEventListener("up", this.nofocus.bind(this));
         el.addEventListener("down", this.nofocus.bind(this));
     }
  }
  componentWillUnmount() {
      $tv.init({ distanceToCenter:false })
  }
  nofocus(event){ this.$tv.requestFocus(event.target); }
  right(event){
    const index = Number(event.target.getAttribute('index'));
    if(index === this.list.length - 1 ){ return; }
    this.setState({activeIndex:index + 1})
  }
  left(event){
    const index = Number(event.target.getAttribute('index'));
    if(index === 0 ){ return; }
    this.setState({activeIndex:index - 1})
  }
 

解釋：
1.新增自定義事件left,right，按左右按鍵來計算當前層級以及縮放比例
2.新增自定義事件up,down，按上下按鍵的時候阻止焦點跳動

demo地址:https://github.com/slailcp/tv-focusable-example/blob/master/react-tv-focusable-example/src/views/example7.js

最終介面：