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

Question

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

我目前正在使用FlatList 的numColumns 参数来制作表格并将视口滚动到该表格上。

这是一个小吃示例 - 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>
    );
  };
}

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

更新 1

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

更新 2

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

不相关的堆栈溢出帖子

• React Native ScrollView/FlatList not scrolling - 这是关于向视口添加 flex 以启用沿 FlatList 的主轴滚动，这已经在上面的示例中起作用。我关心的是滚动crossAxis。
• React native flatlist not scrolling - 不清楚这里的预期和实际行为是什么
• How can I sync two flatList scroll position in react native - 这里，海报正在寻求模拟砌体布局；我没有做任何花哨的事情

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>
        );
    }
}