回应本地平面列表androidTV焦点问题

Question

环境类

反应： 16.3.1反应-本机： 0.55.3

描述

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

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

复制步骤

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

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

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

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

与此相同的问题：https://github.com/facebook/react-native/issues/20100 但是这个bug是“关闭的”

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

导出默认类应用程序扩展组件{渲染（）{const数据 = []; （让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

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

Answer 2

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

Answer 3

这不是一个真正的（适当的）解决方案，但更多的是黑客攻击，但它确实起到了作用...我发现这纯粹是巧合；如果你添加一个边框到ScrollView，你不会有这个问题...所以你也许可以玩一下这个（例如一个看不见的边框）。