用途:为 React 应用提供方向键/遥控器/手柄的焦点管理,适用于智能电视、机顶盒和浏览器。库按元素空间位置计算下一个焦点,无需手动编写方向逻辑。
主要能力:提供 useFocusable 钩子与 FocusContext,区分叶子(实际接收焦点的交互元素)与容器(包裹可聚焦子元素并通过 FocusContext.Provider 传递 focusKey)。支持焦点边界(isFocusBoundary、focusBoundaryDirections)用于模态框/抽屉,程序化聚焦(setFocus、doesFocusableExist),条件可聚焦(focusable),方向输入拦截(onArrowPress),以及事件回调、键位映射、距离计算调优、性能与调试等。
使用方式:在应用启动时调用一次 init,例如从 @noriginmedia/norigin-spatial-navigation-core 导入 init 并传入 debug、visualDebug、throttle、distanceCalculationMethod('center' | 'edges' | 'corners')。叶子组件用 useFocusable 获取 ref 与 focused,并把 ref 绑定到真实 DOM 元素;容器组件用 useFocusable 获取 ref、focusKey,并用 <FocusContext.Provider value={focusKey}> 包裹子元素。模态框可设 isFocusBoundary 并在挂载时调用 focusSelf。程序化聚焦前用 doesFocusableExist 判断,再调用 setFocus。
适用场景:电视端与遥控器导航、列表与网格、虚拟化列表、模态框焦点陷阱、RTL 与无障碍标签等。
限制与注意:每个可聚焦组件必须把 ref 绑定到真实 DOM 元素;容器必须使用 FocusContext.Provider,否则子元素会孤立在根节点导致导航中断。容器上不要读取 focused,应使用 hasFocusedChild(需 trackChildren: true,有性能开销)。focusKey 需稳定,避免每次渲染变化;不要对可能未挂载的 key 盲目调用 setFocus;生产环境不要开启 debug/visualDebug。更详细内容见官方文档 docs 目录。