Norigin Spatial Navigation 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00281/article/details/142270210

Norigin Spatial Navigation 使用教程

Norigin-Spatial-Navigation React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs 项目地址: https://gitcode.com/gh_mirrors/no/Norigin-Spatial-Navigation

1. 项目介绍

Norigin Spatial Navigation 是一个开源库，旨在帮助开发者在基于 ReactJS 的应用程序中实现空间导航功能。该库特别适用于需要通过键盘或遥控器进行方向导航的 Web 浏览器应用、智能电视和连接电视应用。通过使用 React Hooks，开发者可以轻松地将导航功能集成到他们的应用中，使得用户可以通过方向键或遥控器在不同的可聚焦元素之间进行导航。

2. 项目快速启动

安装

首先，通过 npm 安装 Norigin Spatial Navigation 库：

npm install @noriginmedia/norigin-spatial-navigation --save

初始化

在你的应用的根组件中初始化 Norigin Spatial Navigation：

import { init } from '@noriginmedia/norigin-spatial-navigation';

// 初始化导航服务
init({
  // 你可以在这里添加初始化选项
});

创建可聚焦组件

使用 useFocusable Hook 创建一个可聚焦的按钮组件：

import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';

function Button() {
  const [ref, focused] = useFocusable();

  return (
    <div ref={ref} className={focused ? 'button-focused' : 'button'}>
      按我
    </div>
  );
}

创建可聚焦容器

如果你需要一个包含多个可聚焦子组件的容器，可以使用 FocusContext.Provider 和 useFocusable Hook：

import { useFocusable, FocusContext } from '@noriginmedia/norigin-spatial-navigation';
import ListItem from './ListItem';

function ContentList() {
  const [ref, focusKey] = useFocusable();

  return (
    <FocusContext.Provider value={focusKey}>
      <div ref={ref}>
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
    </FocusContext.Provider>
  );
}

3. 应用案例和最佳实践

智能电视应用

Norigin Spatial Navigation 特别适用于智能电视应用，用户可以通过遥控器在不同的菜单项、按钮和链接之间进行导航。例如，在一个电视应用的主菜单中，用户可以通过方向键在不同的菜单项之间切换，并按下确认键进行选择。

Web 浏览器应用

在 Web 浏览器应用中，用户可以通过键盘的方向键在不同的可聚焦元素之间进行导航。例如，在一个电子商务网站上，用户可以通过方向键在不同的商品卡片之间切换，并按下回车键查看商品详情。

最佳实践

初始化选项：根据应用的需求，合理配置初始化选项，如 distanceCalculationMethod 和 customDistanceCalculationFunction。
性能优化：避免在频繁更新的组件中使用 useFocusable Hook，以减少不必要的布局计算。
调试：启用 visualDebug 选项以帮助调试布局问题。

4. 典型生态项目

React Native

虽然 Norigin Spatial Navigation 主要用于 Web 浏览器和智能电视应用，但它也可以在 React Native 应用中使用，特别是在 Android TV 和 Apple TV 上。不过，功能会有所限制，因为某些 Web 特有的功能在 React Native 中不可用。