React Native中TouchableHighlight和TouchableOpacity无法获取焦点问题的解决

一、背景

最近公司做了一个在线教育的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后都需要重新覆盖一次

四、文件下载

 最后，作者提供了修改后的文件，如果大家有需要，可以自行下载，下载地址为：

https://download.csdn.net/download/leonMary/85649618https://download.csdn.net/download/leonMary/85649618