反应本机平面列表 androidTV 焦点问题

react native flatlist androidTV focus issue

环境

描述

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

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

重现步骤

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

预期行为

预期行为应该是 none，因为我们在当前行的末尾。

实际行为

如果在一行的末尾，则焦点转到下一行

备注

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

与 issue #20100 相同的问题，但错误已“关闭”。

示例代码

import React, {Component} from 'react';
import {View, Text, TouchableOpacity, ScrollView} from 'react-native';

export default class 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>
    );
  }

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

这不是一个（正确的）解决方案，更像是一个 hack，但它确实起作用了。我发现这个纯属巧合；如果您将 border 添加到 ScrollView，您将不会遇到此问题。因此您可以尝试一下（例如，不可见的边框）。

您应该可以通过将最后一项的 nextFocusRight 属性 设置为 null 或 undefined.

来解决这个问题