3 个实战场景手把手带你用 react-native-table-component 搭建 React Native 表格组件界面【免费下载链接】react-native-table-componentBuild 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标签。我们通常的做法是用ViewflexDirection: row手动拼一行每行再手动控制列宽、对齐、边框数据一多渲染函数里全是.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 }} {/* 行和列都放在这里 */} /TableRow一行数据的搬运工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.jsRow会先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 做分区前两个场景都是规规矩矩的矩形表格但有些报表天生就带犄角旮旯——比如考勤表左上角是一个斜着的表头角标左侧竖着一列姓名相当于行标题右侧才是真正的打卡数据。这种布局靠RowRows就有点力不从心了因为它的结构是左列 右区两段式。这时候轮到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 | 三个高频坑提前帮你排雷最后聊几句文档里特别标注过的注意事项这几个坑真的很容易踩Col/Cols里的格子不支持自适应行高。竖排组件没法根据内容撑开每行高度所以用它们时最好配合固定heightArr否则长文本会溢出。调内边距请用textStyle里的margin别用padding。组件内部对文字做了justifyContent: center的居中处理用 padding 容易出现文字对不齐的怪现象。父元素不是 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-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考