react TV端焦点移动插件-画廊效果实现

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

最终界面：