React Native安卓TV应用中TouchableOpacity的onFocus事件为何无法触发？

TouchableOpacity并非为TV端遥控器焦点导航场景设计，这就是你使用onFocus和onPressIn均无响应的核心原因。以下是两个可行的解决方案：

方案一：改用Pressable组件（推荐） #

Pressable是React Native 0.63版本后推出的通用触摸组件，原生支持TV端焦点交互，能正常响应遥控器的聚焦事件。替换后的代码示例：

<Pressable
  style={[styles.channelView]}
  onPress={() => setChannelPlaying(item)}
  onFocus={() => console.log("Focused")}
  focusable={true} // 显式声明组件可聚焦，TV端建议强制设置
>
  {/* 你的子组件内容 */}
</Pressable>

方案二：修复TouchableOpacity的焦点支持 #

若你坚持使用TouchableOpacity，需手动开启它的可聚焦属性，同时排查父组件是否拦截焦点：

<TouchableOpacity
  style={[styles.channelView]}
  onPress={() => setChannelPlaying(item)}
  onFocus={() => console.log("Focused")}
  focusable={true} // 关键：开启可聚焦
  accessible={true}
>
  {/* 子组件内容 */}
</TouchableOpacity>

不过该方案稳定性不如Pressable，因为TouchableOpacity的焦点逻辑未针对TV端做专门优化，易出现兼容问题。

额外检查项：

• 确保React Native版本不低于0.60，旧版本对TV端焦点支持较差
• 检查父组件是否设置了focusable={false}或拦截了焦点事件
• 确认组件样式未导致焦点区域被遮挡（比如overflow: hidden或层级问题）

内容的提问来源于stack exchange，提问作者Pysavant Codes