当涉及到在电视应用程序的 React Native 中处理焦点管理时，开发人员可能会发现自己正在经历五个熟悉的阶段（悲伤）：？ ？ ？ ？ ？

焦点管理是电视应用程序开发中的一个独特挑战，因为电视平台的碎片化导致了各种焦点管理技术的出现。开发人员被迫创建并采用多种策略来管理焦点，通常需要兼顾特定于平台的解决方案和跨平台抽象。焦点的挑战不仅在于确保正确处理焦点，还在于处理平台差异。 Android TV 和 Apple 的 tvOS 具有不同的本机焦点引擎，您可以在我的同事 @hellonehha 撰写的这篇文章中阅读更多相关信息。

最初，特定于 TV 的文档和 API 是主要 React Native 文档的一部分。现在，大多数电视特定内容已转移到react-native-tvos项目。

反应本机 tvos

"react-native": "npm:react-native-tvos@latest"

react-native-tvos 项目是一个开源包，为核心 React Native 框架提供补充和扩展，特别关注支持 Apple TV 和 Android TV 平台。该项目中的大部分变化都集中在使用遥控器上的方向键在智能电视上处理基于焦点的导航。该项目由（令人难以置信的！）Doug Lowder 维护，并且通常被推荐作为在 React Native TV 应用程序中处理焦点管理的主要方式。

然而，与许多社区维护的项目一样，react-native-tvos 项目是根据开发人员的需求而发展的，现在有多种方法来处理焦点。让我们探索一下 React-native-tvos 提供的附加组件和现有组件的增强功能：

1.TVFocusGuideView

TVFocusGuideView 提供对 Apple 的 UIFocusGuide API 的支持，并以与 Android TV 相同的方式实现，以帮助确保可以导航到可聚焦控件，即使它们不直接与其他控件对齐 -根据react-native-tvos。

例如，这是在 TVFocusGuideView 组件内呈现的由 10 个可压组件组成的网格：

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

TVFocusGuideView 接受一些帮助您处理焦点的道具：

目的地道具

使用 TVFocusGuideView，您可以设置一组组件来注册为 TVFocusGuideView 的“目的地”。 让我们看看我们的例子：

• 将目的地属性设置为对项目 8 的引用 (destinations={[item8Ref.current]}) 会导致当我们最初导航到 TVFocusGuideView 时焦点移动到项目 8。

trapFocus 道具

此属性确保焦点不会从给定方向的父组件中逃逸。该属性确保焦点不会从给定方向的父组件中逃逸。让我们看看我们的例子：

• 使用 trapFocusLeft 属性，您将无法再从容器中向左导航

自动对焦支柱

当自动对焦设置为 true 时，TVFocusGuideView 将通过将焦点重定向到第一个可聚焦的子项来为您管理焦点。它还会记住最后一个关注的孩子，并在后续访问中将焦点重定向到它。如果此属性与目的地属性一起使用，则目的地属性设置的组件将优先。让我们看看我们的例子：

• 如果没有这个 prop，当我们从 Header 组件移动到 TVFocusGuideView 时，焦点会转到最近的组件 - 第 3 项（根据 Android 基于邻近度的内置焦点引擎）
• 使用自动对焦道具，它会转到第 1 项

2. 可触摸

使用react-native-tvos，Touchable 组件（TouchableWithoutFeedback、TouchableHighlight 和 TouchableOpacity）包含额外的代码来检测焦点变化并在聚焦时正确设置组件的样式。它还确保当用户使用电视遥控器与可触摸视图交互时触发适当的操作。

具体来说，当 Touchable 视图获得焦点时会触发 onFocus 事件，当视图失去焦点时会触发 onBlur 事件。这使您能够在组件处于焦点状态时应用独特的样式或逻辑，而核心 React Native 并没有开箱即用。

此外，onPress 方法已修改为当用户通过按电视遥控器上的“选择”按钮（Apple TV 遥控器上的中心按钮或 Android TV 方向键上的中心按钮）选择 Touchable 时触发) 并且当按住“select”按钮一定时间时，onLongPress 事件会执行两次。

3. 可按压

与 Touchable 一样，Pressable 组件也得到了增强，可以接受 onFocus 和 onBlur 属性。
与用户在触摸屏上按下组件时触发的“按下”状态类似，react-native-tvos Pressable 组件引入了聚焦状态，当组件聚焦在电视屏幕上时，该状态变为 true。

这是一个使用 React Native 核心的 Pressable 和 Touchable 组件的示例，它们不接受/执行 onFocus 和 onBlur 属性：

使用react-native-tvos中相同的Pressable和Touchable组件，它们接受并执行onFocus和onBlur道具：

4. hasTVPreferredFocus 属性

一些 React Native 组件具有 hasTVPreferredFocus 属性，它可以帮助您确定焦点的优先级。如果设置为 true，hasTVPreferredFocus 将强制将焦点转移到该元素。根据 React Native 文档，这些是当前接受 prop 的组件：

但是，如果您使用的是react-native-tvOS，则还有更多组件接受此属性：

让我们看一个例子：

• 将 Pressable 2 的 hasTVPreferredFocus 属性设置为 true 会导致焦点位于 Pressable 2 上
• 当我们位于 Pressable 3 时将其更改为 true 会导致焦点移动到 Pressable 3

5. nextFocusDirection 属性

nextFocusDirection 属性指定当用户沿指定方向导航时接收焦点的下一个组件，帮助您处理焦点导航。当使用react-native-tvos时，该属性被接受hasTVPreferredFocus属性的相同组件接受（View、TouchableHighlight、Pressable、TouchableOpacity、TextInput、TVFocusGuideView、TouchableNativeFeedback、Button）。让我们看一个例子：

nextFocusDown={pressableRef3.current}
nextFocusRight={pressableRef5.current}>

• 将 nextFocusDown 属性设置为 Pressable 3 会导致焦点向下移动时焦点移动到 Pressable 3
• 将 nextFocusRight 属性设置为 Pressable 5 会导致焦点向右移动时焦点移动到 Pressable 5

结论

在处理焦点管理时，React Native TV 应用程序没有一刀切的解决方案。该方法最终取决于项目的具体需求和要求。虽然react-native-tvos提供了有用的跨设备抽象，但您可能必须采用特定于平台的解决方案来处理跨SmartTV平台的常见碎片问题。

花时间探索这些不同的焦点管理解决方案，以便您可以为用户提供直观的焦点处理体验，无论他们使用什么 SmartTV 平台。

相关资源

• https://dev.to/amazonappdev/tv-navigation-in-react-native-a-guide-to-using-tvfocusguideview-302i
• https://medium.com/xite-engineering/revolutionizing-focus-management-in-tv-applications-with-react-native-10ba69bd90
• https://reactnative.dev/docs/0.72/building-for-tv