一、背景
最近公司做了一个在线教育的TV端的视频播放app,类似于酷猫那种,采用React Native作为主框架,头部的导航菜单用TouchableHighlight标签制作,如下图:
二、发现问题
app要求用电视遥控器来控制菜单的导航,但发现其中无论是TouchableHighlight还是TouchableOpacity标签在按遥控器的上下左右的时候无法获取焦点,标签里的onFocus事件根本不进,这个问题足足困扰了我们一个多月,过程中尝试过更换ReactNative的版本,更换android版本,但都不管用。
到后来考虑问题是不是出在TouchableHighlight和TouchableOpacity标签的源码身上,抱着试试看的心理,打开了源码文件TouchableHighlight.js和TouchableOpacity.js,发现其中果然有onFocus事件,里面有个判断Platform.isTV的地方,如下图:
经过打印发现,这里面的Platform.isTV全都返回了false,导致代码无法执行,Platform.isTV的字面意思应该是判断当前运行环境是不是TV端,但无论是在androi模拟器还是装到电视上全都返回false,但具体为什么返回false不得而知。
三、解决问题
经过多次尝试后,最后只能将所有涉及到Platform.isTV的地方全部改为如下图所示,问题即可解决,需要注意的是,由于修改的是node_modules中的文件,下次yarn add或yarn install的时候这些文件还会被恢复回去,所以每次yarn add或yarn install后都需要重新覆盖一次
四、文件下载
最后,作者提供了修改后的文件,如果大家有需要,可以自行下载,下载地址为: