电视遥控器空间导航

Question

我正在开发一个 React 库，它将被 SmartTV 的 Web 应用程序使用，我们的目标是使其通用，以在不同的电视平台（webOS、Android）上工作。

用例： 我们希望使用户能够使用遥控器按钮在屏幕上的不同项目上导航。 从研究看来，每个电视平台都有自己的按钮代码（按下遥控器上的按钮时生成的代码）。我想弄清楚，

1. 电视控件中的箭头按钮是如何处理的，电视平台（全部？或某些平台？）是否负责将焦点从按钮更改为按钮

   • 我想了解电视中的箭头键是如何工作的？

   • 当我们按下箭头键时，框架是否会处理将焦点移动到下一个可聚焦项目（例如按钮到下一个按钮）

2. 如果不是，那么spatial navigation 的最佳方式是什么？

   • 有没有我们可以使用的库？

   • 是否有示例代码可以查看 Netflix、Spotify 等电视应用程序是如何做到这一点的，或者所有这些服务如何为不同的电视平台开发不同的应用程序？

Answer 1

我们还制作了一款支持 iOS、Android 和 Tizen 的应用。 对于 iOS 和 Android，我们使用 react-native。 Android 和 iOS 的原生焦点引擎都做得很好。任何自定义更改都可以在 react-native 级别进行。 由于我们的 Tizen 应用程序是基于 Web 的，因此没有导航，因此我们重用了 react-native 代码，但我们用基于 https://www.npmjs.com/package/react-js-spatial-navigation（使用 Babel 别名）的自定义空间导航包替换了任何 Touchable 实例。 react-native 包导入已替换为 react-native-web。查看有关如何执行此操作的“再生”项目。 因此，在所有三个平台上都实现了 100% 的代码共享。在 iOS 和 Android 上使用 TouchableOpacity/TouchableHighlight，在 Tizen 上使用我们的自定义库进行替换。 我的目的是尽快制作一个项目来证明这一点。