React Native tv app开发

电视应用和我们普通的android应用区别在于焦点的管理，RN官网上有相关描述。

但是很遗憾，发现并不能如官网上一样简单修改就能支持电视应用，因为这里面还有一个致命bug，导致在电视上focus和blur都无法触发，而到现在react-native也没有修复这个issue。

奇葩的是，修复这个bug，需要我们将react-native切换为react-native-tvos，但是根据RN官网上的描述，react-native-tvos只适用于apple tv，android tv并不支持😂。

最好一开始就使用react-native-tvos项目提供的template去创建项目，react-native总有各种各样奇奇怪怪的bug，官方提供的模版一定程度上可以避免我们踩坑。

我们的应用是一个视频播放应用，效果如下。

主要使用了cheerio和react-native-video这两个库来完成。

cheerio用来解析html，得到我们需要数据。如果我们经常使用nodejs来爬取数据，这个库应该并不陌生，非常好用。

react-native-video用来播放视频，但是在tv上，我们要通过监控遥控器的按键来控制播放操作，快进、快退、暂停、播放等。这中间也有一个需要注意的点，就是在全屏情况下，video占据了整个页面，而video组件必须放在一个Touch组件内部，否则遥控器就无法触发TVEventHandler。

快进、快退的是一个明显需要使用debounce的操作，在连续多次点击右、左时，我们只需要记住点击次数，点右加1，点左减1，最后根据点击次数去seek。

最后的效果如下