電視應(yīng)用和我們普通的android應(yīng)用區(qū)別在于焦點(diǎn)的管理，RN官網(wǎng)上有相關(guān)描述。

但是很遺憾，發(fā)現(xiàn)并不能如官網(wǎng)上一樣簡單修改就能支持電視應(yīng)用，因?yàn)檫@里面還有一個(gè)致命bug，導(dǎo)致在電視上focus和blur都無法觸發(fā)，而到現(xiàn)在react-native也沒有修復(fù)這個(gè)issue。

奇葩的是，修復(fù)這個(gè)bug，需要我們將react-native切換為react-native-tvos，但是根據(jù)RN官網(wǎng)上的描述，react-native-tvos只適用于apple tv，android tv并不支持??。

最好一開始就使用react-native-tvos項(xiàng)目提供的template去創(chuàng)建項(xiàng)目，react-native總有各種各樣奇奇怪怪的bug，官方提供的模版一定程度上可以避免我們踩坑。

我們的應(yīng)用是一個(gè)視頻播放應(yīng)用，效果如下。

主要使用了cheerio和react-native-video這兩個(gè)庫來完成。

cheerio用來解析html，得到我們需要數(shù)據(jù)。如果我們經(jīng)常使用nodejs來爬取數(shù)據(jù)，這個(gè)庫應(yīng)該并不陌生，非常好用。

react-native-video用來播放視頻，但是在tv上，我們要通過監(jiān)控遙控器的按鍵來控制播放操作，快進(jìn)、快退、暫停、播放等。這中間也有一個(gè)需要注意的點(diǎn)，就是在全屏情況下，video占據(jù)了整個(gè)頁面，而video組件必須放在一個(gè)Touch組件內(nèi)部，否則遙控器就無法觸發(fā)TVEventHandler。

快進(jìn)、快退的是一個(gè)明顯需要使用debounce的操作，在連續(xù)多次點(diǎn)擊右、左時(shí)，我們只需要記住點(diǎn)擊次數(shù)，點(diǎn)右加1，點(diǎn)左減1，最后根據(jù)點(diǎn)擊次數(shù)去seek。

最后的效果如下