反应原生 flatlist androidTV 焦点问题

Question

环境

反应：16.3.1 反应原生：0.55.3

描述

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

是否有解决方案可以防止这种情况发生并确保焦点在到达 flatlist 的末尾时会停止？

重现步骤

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

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

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

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

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

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

导出默认类 App extends Component { render() { const data = []; for (let 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

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

Answer 2

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