如何向右滚动到React Native FlatList中的列（2018）

Question

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

我目前正在使用FlatList的{​​{3}}参数创建一个表并在该表上滚动视口。

这是一个小吃示例 - numColumns：

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

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

更新2

我正在寻求虚拟解决方案。虽然上面的线框使用文本，但我真正感兴趣的用例是浏览一个平铺服务器，浏览大型50MB +图像的部分内容。将所有这些加载到滚动视图中会太慢。

不相关的堆栈溢出帖子

• RegularGridExample - 这是关于向视口添加flex以启用沿着FlatList的主轴滚动，这已在上面的示例中工作。我关注的是滚动crossAxis。
• React Native ScrollView/FlatList not scrolling - 目前还不清楚预期和实际行为是什么
• React native flatlist not scrolling - 这里，海报正在寻求模拟砌体布局;我没有做任何如此花哨的事

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