如何在 React Native FlatList (2018) 中向右滚动到列

Question

我正在寻找一种在这样的表格上滚动视口的方法，除了每个单元格的大小完全相同：

我目前正在使用FlatList'snumColumns参数来制作表格并在该表格上滚动视口。

这是一个小吃示例 - RegularGridExample：

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const numRows = 10,
  numColumns = 10,
  width = 100,
  height = 100,
  cells = [...Array(numRows * numColumns)].map((_, cellIndex) => {
    const rowIndex = Math.floor(cellIndex / numRows),
      colIndex = cellIndex % numColumns;
    return {
      key: `${colIndex},${rowIndex}`,
      rowIndex,
      colIndex,
      styles: {
        width,
        height,
        backgroundColor: 'green',
        borderColor: 'black',
        borderWidth: 1,
      },
    };
  });

export default class RegularGridExample extends React.Component {

  render() {
    return (
      <FlatList
        data={cells}
        renderItem={this.renderItem}
        numColumns={numColumns}
        horizontal={false}
        columnWrapperStyle={{
          borderColor: 'black',
          width: numColumns * width,
        }}
      />
    );
  }

  renderItem = ({ item: { styles, rowIndex, colIndex } }) => {
    return (
      <View style={styles}>
        <Text>r{rowIndex}</Text>
        <Text>c{colIndex}</Text>
      </View>
    );
  };
}

此示例将正确滚动以显示视口下方的行，但不会滚动以显示超出视口的列。如何启用滚动视口以显示 aFlatList的列？

更新 1

我不认为这可以通过嵌套FlatLists轻松解决，这是我在使用上述numColumns方法之前尝试的第一件事。这里的用例是将视口移动到大于视口的网格上，而不仅仅是在视口内滚动一行。

更新 2

我正在寻求虚拟化解决方案。虽然上面的线框使用文本，但我真正感兴趣的用例是浏览 tile 服务器，在 50MB 以上的大图像的一部分上导航。将它们全部加载到滚动视图中会太慢。

不相关的堆栈溢出帖子

• React Native ScrollView/FlatList 不滚动- 这是关于向视口添加 flex 以启用沿 的主轴滚动FlatList，这已经在上面的示例中工作。我关心的是滚动crossAxis.
• React Native flatlist 不滚动- 目前还不清楚这里的预期和实际行为是什么
• 如何在 react native 中同步两个 flatList 滚动位置- 在这里，海报试图模拟砖石布局；我没有做任何那么花哨的事情

Answer 1

这不能使用该FlatList方法来完成，因为numColumns使用了显式设置horizontal={false}，因此禁用了滚动水平方向。

这是使用的解决方法nested ScrollViews

export default class RegularGridExample extends React.Component {
    render() {
        const generatedArray = [1,2,3,4,5,6]

        return (
            <ScrollView horizontal>
                <ScrollView >
                    {generatedArray.map((data, index) => {
                       return <View style={{flexDirection: 'row'}} >
                           {generatedArray.map((data, index) => {
                              return  <View style={{height: 100, width: 100, backgroundColor: 'red', borderWidth: 1, borderColor: 'black'}} />
                           })}
                       </View>
                    })}
                </ScrollView>
            </ScrollView>
        );
    }
}