反应本地平板列表androidTV焦点问题

Question

环境

反应：16.3.1 反应本机：0.55.3

说明

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

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

复制步骤

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

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

“实际行为重点”如果位于行尾，则移至下一行

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

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

示例代码： 从'react'导入React，{Component}； 从'react-native'导入{View，Text，TouchableOpacity，ScrollView};

导出默认类App扩展组件{   render（）{     const data = [];     对于（让i = 0; i <10; i ++）       data.push（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

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

Answer 2

这实际上不是一个（正确的）解决方案，而是更多的技巧，但是它确实可以完成工作。如果您在border上添加ScrollView，就不会有此问题。.因此，您可以稍微尝试一下（例如，看不见的边框）。

Answer 3

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