React Native AndroidTV开发中onFocus、onBlur事件不生效求助

核心触发原因 #

• 组件未被纳入安卓原生焦点遍历链：RN在TV场景下不会自动将accessible属性映射为安卓原生的focusable=true标记，哪怕配置了hasTVPreferredFocus，组件本身没有可聚焦属性时，根本不会被TV的方向键导航识别。
• 外层容器属性丢失：嵌套View在原生层被默认合并（RN的collapsable优化逻辑），会覆盖子组件的焦点相关配置，导致子组件的事件绑定无法生效。
• 焦点遍历链断裂：同级别的交互组件如果没有标记为可聚焦，TV方向键导航找不到连续的可聚焦节点，会出现焦点卡在某个位置无法移动的情况，自然不会触发目标组件的Focus/Blur回调。

可落地的修复步骤 #

• 给所有需要接收焦点的触摸类组件，显式追加focusable={true}属性，不要仅依赖accessible的默认映射逻辑。
• 给所有包裹可聚焦组件的外层View配置collapsable={false}，禁用原生层的容器合并优化，避免子组件的焦点属性被覆盖。
• 为了兼容低版本RN的TV逻辑，临时给可聚焦组件追加tvParallaxProperties={{}}空配置，该属性是RN内置组件触发TV焦点事件的隐性依赖，哪怕不需要视差动效，加这个配置也能解锁事件绑定能力。
• 调试时可以临时给可聚焦组件设置醒目的背景色，确认组件实际渲染尺寸不为0，避免出现“看似渲染了但实际没有布局占位，收不到焦点”的低级问题。

修正后的可运行代码示例 #

const App = () => {
  return (
    // 外层View禁用容器合并
    <View collapsable={false}>
      <TouchableHighlight
        hasTVPreferredFocus={true}
        accessible={true}
        // 补充隐性依赖的属性
        focusable={true}
        tvParallaxProperties={{}}
        onFocus={() => alert('focus')}
        onBlur={() => alert('blur')}
        onPress={() => alert('press')}>
        <Text>This is a text</Text>
      </TouchableHighlight>
      <Button 
        title="title"
        // 同级组件补可聚焦标记，避免焦点遍历断链
        focusable={true}
      />
    </View>
  );
};

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