想在 React Native 里做表格？react-native-table-component 实战上手指南

想在 React Native 里做表格？react-native-table-component 实战上手指南

【免费下载链接】react-native-table-component🌱Build table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component

做 App 开发的朋友多半经历过这种时刻：需求方丢过来一句"这里要一张报表"，你搜遍组件库，要么体积吓人，要么跟当前 RN 版本水火不容。其实一个轻量级的react-native-table-component就够用了。它是专为 React Native 打造的表格组件，核心源码只有几个文件，却把 Table、Row、Col、Cell 这些基础积木全备齐了。这篇文章不空谈概念，咱们直接从真实场景出发，把它一步步跑起来。

先认识这位"轻量选手"，再决定要不要用它

react-native-table-component 的代码都集中在components/目录下，table.js、rows.js、cols.js、cell.js四个文件就撑起了整个库。它不像重型表格框架那样塞给你一堆内置功能，而是把"容器、行、列、单元格"这几个最基础的概念拆成独立组件，把拼装的自由交还给你。

用个生活化的比喻：Table 是画框，Row 和 Col 是横竖的格栅，Cell 是每一格，TableWrapper 则是调整格栅位置的胶水。理解了这层关系，后面写起来就顺了。

三步把 react-native-table-component 装进项目

安装很简单，用 npm 一条命令搞定：

npm install react-native-table-component --save

然后在代码顶部一次性导入全部组件：

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

到这里，环境就算备好了。

六个核心组件各管什么：一张表看清分工

组件	管的事	典型数据形态
Table	最外层容器，统一下发边框样式	子组件即可
TableWrapper	无边框逻辑的纯容器，用于手动拼装布局	子组件即可
Row	渲染一行	一维数组
Rows	渲染多行	二维数组
Col	渲染一列	一维数组
Cols	渲染多列	二维数组
Cell	最小单元格，可放文本或任意 React 元素	任意值

注意borderStyle是表格的灵魂配置，它包含borderWidth和borderColor，Table 会把这套线框规则自动传给内部所有单元格，让整张表格的边框保持一致。

实战一：5 分钟搭出带表头的成绩单

最常见的需求就是"表头 + 多行数据"。用 Table 当容器，Row 处理表头，Rows 直接吞下二维数据，代码量少得惊人：

import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, Row, Rows } from 'react-native-table-component'; export default class ScoreSheet extends Component { constructor(props) { super(props); this.state = { tableHead: ['姓名', '语文', '数学', '英语'], tableData: [ ['小明', '92', '88', '95'], ['小红', '85', '96', '90'], ['小刚', '78', '82', '79'], ], }; } render() { const { tableHead, tableData } = this.state; return ( <View style={styles.container}> <Table borderStyle={{ borderWidth: 1, borderColor: '#c8e1ff' }}> <Row data={tableHead} style={styles.head} textStyle={styles.text} /> <Rows data={tableData} textStyle={styles.text} /> </Table> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, head: { height: 40, backgroundColor: '#f1f8ff' }, text: { margin: 6, textAlign: 'center' }, });

Rows会自动把二维数组遍历成多行，style控制行的外观，textStyle控制单元格文本，行与行之间完全不用手写 map。

实战二：固定首列的"双区表格"怎么拼

稍微复杂一点的场景，比如左侧是固定的人名列、右侧是滚动数据区，这时就要请出 TableWrapper 这个胶水，把 Col 和 Rows 并排粘在一起：

import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component'; export default class DoubleZoneTable extends Component { constructor(props) { super(props); this.state = { tableHead: ['', '语文', '数学', '英语'], tableTitle: ['小明', '小红', '小刚', '小丽'], tableData: [ ['92', '88', '95'], ['85', '96', '90'], ['78', '82', '79'], ['90', '94', '93'], ], }; } render() { const { tableHead, tableTitle, tableData } = this.state; return ( <View style={styles.container}> <Table borderStyle={{ borderWidth: 1 }}> <Row data={tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.text} /> <TableWrapper style={styles.wrapper}> <Col data={tableTitle} style={styles.title} heightArr={[28, 28, 28, 28]} textStyle={styles.text} /> <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text} /> </TableWrapper> </Table> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, head: { height: 40, backgroundColor: '#f1f8ff' }, wrapper: { flexDirection: 'row' }, title: { flex: 1, backgroundColor: '#f6f8fa' }, row: { height: 28 }, text: { textAlign: 'center' }, });

这里有两个关键点：

• flexArr按数组下标给每一列分配占比，比如[1, 2, 1, 1]就表示首列占 1 份、第二列占 2 份；
• heightArr用来逐行指定 Col 的高度，因为纵向排列的列没有"行"的概念，高度得显式说清楚。

新手最容易踩的三个坑，提前帮你排掉

① Col/Cols 的单元格不支持自适应高度。纵向布局下高度必须靠heightArr指定，别指望它自己撑开。

② 调内边距用textStyle里的 margin，别用 padding。项目文档明确建议用 margin 来控制单元格留白，盲目用 padding 容易让布局跑偏。

③ 父容器不是 Table 时，边框会"消失"。比如把 TableWrapper 直接塞进横向 ScrollView，要手动给它补上borderStyle，否则线框对不上。

另外，Cell 的data属性不挑食——普通文本、数字都能放，塞一个 React 元素（比如 TouchableOpacity 按钮）也完全没问题，做可点击的交互表格就靠这一手。

写在最后：下一步去跑一遍

react-native-table-component 的本质，就是把"容器、行、列、单元格"这几块积木交到你手里，理解各自分工之后，剩下的不过是堆数据、调样式而已。建议你现在就把第一个成绩单示例贴进项目跑一遍，再试着给某个 Cell 换成一个按钮，亲手体验一次表格里的交互效果，你会发现它比你想象中顺手得多。

【免费下载链接】react-native-table-component🌱Build table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component