React Native FlatList实现横向滚动至指定列（2018）

嘿，我懂你想要实现一个横向可滚动、所有单元格尺寸完全统一的表格视图～用FlatList来做的话，确实得调整下默认配置——原来的numColumns是配合纵向滚动设计的，直接用在横向场景里会出问题。下面给你调整后的完整实现，完美贴合你的需求：

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

const App = () => {
  const numRows = 10;
  const numColumns = 10;
  const cellSize = 100; // 每个单元格的宽高保持一致

  // 生成表格数据源，每个单元格包含明确的行列索引
  const cells = [...Array(numRows * numColumns)].map((_, cellIndex) => {
    const rowIndex = Math.floor(cellIndex / numColumns);
    const colIndex = cellIndex % numColumns;
    return {
      id: `${rowIndex}-${colIndex}`,
      row: rowIndex,
      col: colIndex,
      text: `R${rowIndex}C${colIndex}`
    };
  });

  // 渲染单个单元格
  const renderCell = ({ item }) => (
    <View style={[styles.cell, { width: cellSize, height: cellSize }]}>
      <Text style={styles.cellText}>{item.text}</Text>
    </View>
  );

  return (
    <FlatList
      data={cells}
      renderItem={renderCell}
      keyExtractor={(item) => item.id}
      horizontal={true} // 开启横向滚动模式
      numColumns={numColumns} // 控制每行的单元格数量（即表格的列数）
      contentContainerStyle={styles.listContainer}
      showsHorizontalScrollIndicator={true} // 显示横向滚动指示器，可按需关闭
    />
  );
};

const styles = StyleSheet.create({
  listContainer: {
    paddingVertical: 10, // 给表格上下加些留白，可选
  },
  cell: {
    borderWidth: 1,
    borderColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
  },
  cellText: {
    fontSize: 16,
  },
});

export default App;

关键调整说明 #

• 开启horizontal={true}：把FlatList的滚动方向切换为横向，这是实现横向表格的核心
• 保留numColumns：在横向模式下，这个参数会控制每行显示的单元格数量（也就是表格的列数），确保表格的行列结构正确
• 固定单元格尺寸：通过给每个单元格设置统一的width和height，保证所有单元格大小完全一致，不会因内容差异变形
• 清晰的数据源：每个单元格都携带行列索引，方便后续处理点击、数据绑定等业务逻辑

如果你的表格行数特别多，需要同时支持纵向滚动的话，只需要把这个横向FlatList嵌套在一个纵向的ScrollView或者另一个FlatList里，就能实现横竖双向滚动的完整表格啦～

内容的提问来源于stack exchange，提问作者codekiln