React Native：react-native-paper DataTable表头与单元格宽度对齐方法

要让表头列和对应的数据单元格宽度一致，核心是让每个数据单元格也复用columns数组中定义的size字段，而非硬编码单元格结构。具体修改如下：

修改数据行的渲染逻辑 #

将原来硬编码的DataTable.Cell改为通过columns数组映射渲染，确保每个单元格与表头列一一对应并继承宽度：

<ScrollView style={{ backgroundColor: "#fff" }}>
  {gridData.slice(from, to).map((row) => {
    return (
      <DataTable.Row key={row.tran_id}>
        {/* 遍历columns数组渲染对应单元格 */}
        {columns.map((column) => (
          <DataTable.Cell
            key={column.id}
            numeric
            style={[styles.cells, { width: column.size }]} // 应用列定义的宽度
          >
            {row[column.id]} {/* 通过column.id动态获取行数据对应字段值 */}
          </DataTable.Cell>
        ))}
      </DataTable.Row>
    );
  })}
</ScrollView>

关键说明 #

1. 宽度同步：每个单元格直接使用column.size设置宽度，与表头列的宽度规则完全一致，从根源上解决宽度不匹配问题。
2. 代码可维护性：通过遍历columns数组渲染单元格，后续新增/删除列时无需修改单元格代码，只需更新columns数组即可。
3. 样式兼容：合并原有styles.cells样式与宽度属性，保留单元格边框、padding等原有样式。

可选优化 #

如果部分列不需要numeric属性，可以在columns数组中添加对应标记：

const columns = [
  { id: "tran_id", title: "Tran No.", size: 100, numeric: true },
  { id: "company_name", title: "Company Name", size: 100, numeric: false },
  // ...其他列
];

渲染单元格时动态设置：

<DataTable.Cell
  key={column.id}
  numeric={column.numeric}
  style={[styles.cells, { width: column.size }]}
>
  {row[column.id]}
</DataTable.Cell>

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