3 个实战场景，手把手带你用 react-native-table-component 搭建 React Native 表格组件界面

3 个实战场景，手把手带你用 react-native-table-component 搭建 React Native 表格组件界面

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

如果你正在开发 React Native 应用，多半遇到过这种尴尬：业务数据明明是规规矩矩的二维结构（学生成绩、订单明细、比赛积分），可原生View只能一层层嵌套拼布局，FlatList又天生是为"列表"设计的，真要按列对齐、加边框、控制行高，代码瞬间变得又臭又长。今天我们要聊的react-native-table-component，正是为了解决"React Native 表格组件"这个痛点而生——它是一个轻到几乎没有存在感的表格库，核心只有几个文件，却能帮你把二维数据稳稳当当地铺在屏幕上。

这篇文章不打算罗列一堆概念，而是带着三个真实场景，边做边学：从一张最朴素的报表，到可以横向滚动的宽表，再到带"固定表头 + 复杂分区"的进阶表格。读完你就能直接照着抄进自己的项目里。

01 | 这个表格组件库，凭什么值得你多用一次

先别急着看代码，我们花一分钟搞清楚它解决了什么问题。

在移动端做"表格"之所以痛苦，是因为 RN 没有一个开箱即用的<table>标签。我们通常的做法是：

1. 用View+flexDirection: 'row'手动拼一行；
2. 每行再手动控制列宽、对齐、边框；
3. 数据一多，渲染函数里全是.map()和三元表达式，看着就头疼。

react-native-table-component把这件事抽象成了几个语义清晰的组件：Table（画布）、Row/Rows（行）、Col/Cols（列）、Cell（格子）。你只需要把数据喂给它们，剩下的对齐、边框、宽度分配都由组件内部完成。

它的另一个好处是上手门槛极低——所有组件都是普通的 RN 组件，不依赖任何原生模块，改样式就是传style，几乎没有任何学习成本。整个库的实现也很透明，感兴趣的话可以直接翻看仓库里的components/table.js、components/rows.js、components/cols.js和components/cell.js，全部加起来也就一两百行代码。

02 | 三步完成安装与引入

安装方式和其他 npm 包没有区别：

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

想从源码开始看实现的同学，也可以直接把仓库克隆到本地再慢慢研究：

git clone https://gitcode.com/gh_mirrors/re/react-native-table-component

装好之后，在你的组件文件顶部一次性引入全家桶：

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

到这里，准备工作就全部结束了。相比那些需要 link 原生代码、配 Gradle 的库，这个组件从安装到能跑，真的只需要这三步。✅

03 | 先认识三个零件：画布、行、格子

在动手写业务代码前，我们先用生活化的类比把三个主角认个脸熟。

Table：整张表格的"画布" 🖼️

Table是包裹一切的最外层容器，它负责两件事：承载你传进来的style（背景色、内边距等），以及把你定义的borderStyle下发给内部的每一个格子。看代码就明白了，它内部用React.Children.map给子组件统一注入边框配置（见components/table.js）。所以你在 Table 上设置一次边框，整张表就齐了：

<Table borderStyle={{ borderWidth: 1, borderColor: '#d5dbe3' }}> {/* 行和列都放在这里 */} </Table>

Row：一行数据的"搬运工"

Row接收一个一维数组，把数组里的每一项逐个塞进Cell。你可以通过widthArr指定每列的宽度，用flexArr让某几列按比例伸缩，再用height控制整行高度。它的核心逻辑在components/rows.js里，其实就是把data.map()这件事封装掉了。

Cell：最小单位的"格子" 🧩

Cell是表格里最小的展示单元。它可以放纯文本，也可以放任意 React 元素（后面我们会用到这个能力）。宽度、高度、flex 比例、边框、文字样式，它都支持。

一句话小结：Table 管整体和边框，Row 管一行的排布，Cell 管单个格子。理清这三个，基础表格你已经会了八成。

04 | 实战一：把比赛积分榜做成一张报表 📊

现在我们来解决第一个真实问题：把一份二维的比赛数据渲染成表格。

假设我们手头有一份篮球队员的得分数据，包含"队员、位置、得分、助攻"四列，表头需要单独一行、底色与数据行区分开。这段代码就干这一件事：

import React, { useState } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, Row, Rows } from 'react-native-table-component'; export default function ScoreBoard() { const [headline] = useState(['队员', '位置', '得分', '助攻']); const [records] = useState([ ['阿哲', '前锋', '23', '5'], ['小北', '后卫', '18', '11'], ['大熊', '中锋', '15', '2'], ]); return ( <View style={styles.page}> <Table borderStyle={{ borderWidth: 1, borderColor: '#d5dbe3' }}> <Row data={headline} style={styles.headRow} textStyle={styles.cellText} /> <Rows data={records} textStyle={styles.cellText} /> </Table> </View> ); } const styles = StyleSheet.create({ page: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: '#f7f9fc' }, headRow: { height: 42, backgroundColor: '#eaf2ff' }, cellText: { margin: 8, textAlign: 'center' }, });

注意看，这里有个很容易被忽略但很贴心的设计：表头用Row，数据用Rows。Rows接收的是"数组的数组"，会自动把外层数组的每个元素拆成一行来渲染。数据行数变多、变少，你完全不用改 JSX，改数据源就行。

💡 小结：Row负责单行、Rows负责批量多行。有了它们，从"手工拼行"到"喂数据就出表"，只是一次组件替换的距离。

05 | 实战二：九列数据挤爆屏幕？横向滚动来救场

第一个场景够用，但真实业务哪有这么温柔。比如一张商品汇总表，动辄七八列起步，"编号、商品、单价、库存、月销量、好评率、发货地、仓库、状态"一字排开，手机屏幕根本装不下。

我们的解法是：外层套一个横向ScrollView，再用widthArr给每一列钉死一个宽度。列宽固定后，Table 的总宽度就是各列之和，超出屏幕的部分自然交给滚动处理。再看一眼components/rows.js，Row会先sum(widthArr)算出总宽，所以你不用手动算任何尺寸：

import React, { useState } from 'react'; import { StyleSheet, View, ScrollView } from 'react-native'; import { Table, Row } from 'react-native-table-component'; export default function WideTable() { const [fields] = useState(['编号', '商品', '单价', '库存', '月销量', '好评率', '发货地', '仓库', '状态']); const [colWidths] = useState([60, 110, 80, 70, 90, 80, 100, 70, 80]); // 批量造 20 行测试数据 const rows = Array.from({ length: 20 }, (_, i) => [i + 1, `SKU-${2000 + i}`, 99, i * 3, i * 5, '98%', '华东仓', `A-${i % 4}`, '在售'] ); return ( <View style={styles.page}> <ScrollView horizontal> <View> <Table borderStyle={{ borderWidth: 1, borderColor: '#c1c7cf' }}> <Row data={fields} widthArr={colWidths} style={styles.headRow} textStyle={styles.cellText} /> </Table> <ScrollView style={styles.bodyScroll}> <Table borderStyle={{ borderWidth: 1, borderColor: '#c1c7cf' }}> {rows.map((row, idx) => ( <Row key={idx} data={row} widthArr={colWidths} style={[styles.dataRow, idx % 2 === 0 && styles.altRow]} textStyle={styles.cellText} /> ))} </Table> </ScrollView> </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ page: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: '#f7f9fc' }, headRow: { height: 44, backgroundColor: '#2e4a6b' }, cellText: { margin: 8, textAlign: 'center' }, bodyScroll: { marginTop: -1 }, dataRow: { height: 40, backgroundColor: '#ffffff' }, altRow: { backgroundColor: '#eef3fa' }, // 斑马纹，阅读更轻松 });

这里顺手用了两个小技巧，你也可以抄走：

• 表头独立成表 + 数据区套纵向 ScrollView：这样横向滚动时表头跟着走，纵向滚动时表头可以钉在顶部，视觉上非常像"专业报表软件"。
• 隔行变色：给偶数行换一个浅色背景，长列表的扫读体验立刻上一个台阶。

💡 小结：widthArr负责"每列多宽"，ScrollView负责"放不下怎么办"，两者组合就是宽表格的标准答案。

06 | 实战三：复杂表头这样排，用 TableWrapper 做分区

前两个场景都是"规规矩矩"的矩形表格，但有些报表天生就带"犄角旮旯"——比如考勤表：左上角是一个斜着的表头角标，左侧竖着一列姓名（相当于"行标题"），右侧才是真正的打卡数据。

这种布局靠Row+Rows就有点力不从心了，因为它的结构是"左列 + 右区"两段式。这时候轮到Col和TableWrapper登场。TableWrapper可以理解为 Table 内部的一块自由分区，它不参与边框统一下发逻辑，让你能手动拼装复杂的行列组合：

import React, { useState } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component'; export default function AttendanceBoard() { const [weekHead] = useState(['', '周一', '周二', '周三']); const [nameList] = useState(['小林', '小周', '小陈']); const [statusGrid] = useState([ ['出勤', '请假', '出勤'], ['出勤', '出勤', '出勤'], ['迟到', '出勤', '请假'], ]); return ( <View style={styles.page}> <Table borderStyle={{ borderWidth: 1, borderColor: '#cdd6e2' }}> <Row data={weekHead} style={styles.headRow} textStyle={styles.cellText} /> <TableWrapper style={styles.bodyArea}> <Col data={nameList} style={styles.nameCol} textStyle={styles.cellText} /> <Rows data={statusGrid} style={styles.dataRow} textStyle={styles.cellText} /> </TableWrapper> </Table> </View> ); } const styles = StyleSheet.create({ page: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: '#f7f9fc' }, headRow: { height: 40, backgroundColor: '#eaf2ff' }, cellText: { margin: 8, textAlign: 'center' }, bodyArea: { flexDirection: 'row' }, nameCol: { flex: 1, backgroundColor: '#f0f4fa' }, dataRow: { height: 36 }, });

看到关键点了吗？左侧Col竖着排姓名，右侧Rows横着铺数据，两者并排躺在同一个TableWrapper里，天然就对上了行。如果把名字列换成操作按钮列，或者想再加一列序号，思路完全一致。

💡 小结：当表格出现"左列 + 右区""角标 + 区块"这类非矩形结构时，Col（竖排）+Rows（横排）+TableWrapper（分区）就是你的组合利器。

07 | 进阶玩法：在格子里放按钮和自定义组件

看到这里你可能会问：表格里只能放文字吗？当然不是。Cell的data属性除了字符串，还接受任意 React 元素（这个能力在 v1.1.1 就支持了）。这意味着你可以把TouchableOpacity、Switch、Image直接塞进格子里。

比如给订单表加一列"操作"，每行放一个可点击的按钮，整张表瞬间就有了交互：

import React, { useState } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; import { Table, TableWrapper, Row, Rows, Cell } from 'react-native-table-component'; export default function OrderSheet() { const [headline] = useState(['订单号', '金额', '状态', '操作']); const [orders] = useState([ ['A1001', '¥299', '已付款'], ['A1002', '¥59', '已发货'], ['A1003', '¥1299', '已付款'], ]); const renderAction = () => ( <TouchableOpacity onPress={() => Alert.alert('提示', '申请退款已提交')}> <View style={styles.btnBox}> <Text style={styles.btnText}>退款</Text> </View> </TouchableOpacity> ); // 把第 4 列替换成按钮组件 const rowsWithAction = orders.map((item) => [item[0], item[1], item[2], renderAction()]); return ( <View style={styles.page}> <Table borderStyle={{ borderWidth: 1, borderColor: '#cdd6e2' }}> <Row data={headline} style={styles.headRow} textStyle={styles.cellText} /> <Rows data={rowsWithAction} textStyle={styles.cellText} /> </Table> </View> ); } const styles = StyleSheet.create({ page: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: '#f7f9fc' }, headRow: { height: 40, backgroundColor: '#eaf2ff' }, cellText: { margin: 8, textAlign: 'center' }, btnBox: { width: 64, height: 24, borderRadius: 4, backgroundColor: '#5b8def', justifyContent: 'center' }, btnText: { color: '#fff', fontSize: 13, textAlign: 'center' }, });

更进一步，如果你需要"每行按钮的点击回调带上行号"，用Cell手动控制某个格子（参考components/cell.js的用法），把行号闭包进元素里即可。表格从此不再是"死的展示层"，而是能和用户互动的数据面板。

💡 小结：data里放字符串是表格，放 React 元素就是"带操作列的表格"。这是这个库最有想象力的地方。

08 | 三个高频坑，提前帮你排雷

最后聊几句文档里特别标注过的注意事项，这几个坑真的很容易踩：

1. Col/Cols里的格子不支持自适应行高。竖排组件没法根据内容撑开每行高度，所以用它们时最好配合固定heightArr，否则长文本会溢出。
2. 调内边距请用textStyle里的margin，别用padding。组件内部对文字做了justifyContent: 'center'的居中处理，用 padding 容易出现文字对不齐的怪现象。
3. 父元素不是 Table 时，要自己传borderStyle。比如你把TableWrapper或Cols直接放在ScrollView里，边框不会自动出现，记得显式补上。

09 | 写在最后：从会用到用好的分水岭

回头看一遍，我们其实只用了react-native-table-component一半不到的能力，就完成了三张风格完全不同的表：纯展示的报表、可滚动的宽表、带分区的复杂表。这个库真正的价值在于——它把"二维数据怎么摆"这个高频问题，压缩成了几个参数：widthArr管列宽、heightArr管行高、flexArr管伸缩、borderStyle管边框，剩下的交给组件内部去处理。

如果接下来你想深入折腾，建议直接读读仓库里的源码：components/table.js看边框如何下发，components/rows.js和components/cols.js看行列如何映射，utils/index.js里那个sum函数又串起了哪些宽度计算。读懂这几百行代码，你对"组件如何为业务抽象"的理解，会比任何教程都来得扎实。

表格这件事，说难不难，说简单也藏着不少细节。希望这篇实战笔记能帮你少走几步弯路，早日交出那张让同事都来问"怎么做的"的专业表格。🎉

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