反应原生 flatlist androidTV 焦点问题

Question

环境

反应：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>
);

}

Answer 1

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

Answer 2

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

Answer 3

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