react TV端焦点移动插件 react-tv-focusable
安装
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，按上下按键的时候阻止焦点跳动
最终界面：
