反应原生 flatlist androidTV 焦点问题

Posted 2023-02-21

【中文标题】反应原生 flatlist androidTV 焦点问题

【英文标题】：react native flatlist androidTV focus issue

【发布时间】：2019-01-01 09:54:00

【问题描述】：

环境

反应：16.3.1 反应原生：0.55.3

说明

我已经在 React Native 上实现了一个多维列表视图，其中包含一些水平的 FlatLists 。一切都正确显示。但是，当我将焦点一直移动到行尾时，当我尝试向右移动时（已经在行尾），焦点会自动移到下面的行。

是否有解决方案来防止这种情况并确保焦点在到达平面列表的末尾时停止？

复制步骤

垂直渲染一个 FlatList，每一行都是另一个水平的 FlatList。滚动到行尾，尝试向右移动，焦点将向下移动到下一行。

预期行为预期行为应该是无，因为我们位于当前行的末尾。

如果在一行的后端，实际行为焦点转到下一行

我搜索了文档，这是 firetv/androidtv 的特定问题。

与此相同的问题：https://github.com/facebook/react-native/issues/20100 但错误已“关闭”

示例代码： 从“反应”导入反应，组件； 从 'react-native' 导入 View, Text, TouchableOpacity, ScrollView;

导出默认类 App 扩展组件 使成为（） 常量数据 = []; for (让 i = 0; i

return (
  <View>
    [1, 2].map(() => (
      <ScrollView horizontal style=height: 210>
        data.map(i => (
          <TouchableOpacity key=i>
            <View
              style=
                backgroundColor: 'grey',
                width: 200,
                height: 200,
              
            >
              <Text style=fontSize: 60>i</Text>
            </View>
          </TouchableOpacity>
        ))
      </ScrollView>
    ))
  </View>
);

【问题讨论】：

您可以添加任何详细信息，例如：使用的代码，遇到的错误问题吗？ How do I ask a good question?, How to create a Minimal, Complete, and Verifiable example 向社区展示你的尝试。

【参考方案1】：

这不是一个真正的（正确的）解决方案，而更像是一种 hack，但它确实可以完成工作。我发现这一点纯属巧合；如果你将border 添加到ScrollView，你就不会遇到这个问题。所以你可以尝试一下（例如一个不可见的边框）。

【讨论】：

这是一个很好的解决方案！

【参考方案2】：

目前我发现这对于 tvOS 或 android 或 firetv 是不可能的。除非我弄错了，否则我假设尝试创建connectedTv应用程序的人很少，或者如果他们有一个非常非常简单的界面

【讨论】：

我在 Android TV 上的空间导航也遇到了问题。我已经尝试实现我自己的 Focusables 空间导航系统，但是无论我尝试什么，任何类型的滚动视图仍然会获得焦点。这会导致各种意外行为。

有谁知道如何禁用空间导航系统，同时仍然允许 TVEventHandler 从遥控器发送 keyCodes？

@SacWebDeveloper 成功了吗？

@Maddis 不，很遗憾。我认为我们注定要失败。

真心希望 Flutter 能够处理电视应用，但目前还不可能。正如我们已经在 ios 和 Android 上看到的用于手机和平板电脑的那样，这将是一个更好的框架。尚无法构建到 tvOS 和 Android TV，空间导航是最大的障碍。

【参考方案3】：

您应该能够通过将最后一项的nextFocusRight 属性设置为null 或undefined 来处理此问题。