React Native 表格组件 react-native-table-component 快速上手：5 分钟搭出可横向滚动的销售报表

React Native 表格组件 react-native-table-component 快速上手5 分钟搭出可横向滚动的销售报表【免费下载链接】react-native-table-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component在 React Native 开发里展示一批有结构的业务数据往往比想象中更折腾官方基础组件没有现成的table靠 View 一层层手写对齐、边框和行高数据稍微多一点就乱成一团。react-native-table-component 就是为这个痛点而生的轻量级表格组件库它把表格拆成 Table、Row、Col、Cell 几个原子组件用声明式代码就能拼出从简单列表到复杂报表的任何布局。本文会带着你从安装、最小示例一路走到能直接跑业务的综合案例适合刚接触 React Native 表格组件的初学者。为什么别再用 View 手搭表格先花十秒钟感受一下痛点。手写表格时你至少要处理三件事每列的宽度要对齐、每行的内容要垂直居中、边框要细到不出现双线重叠。而在 React Native 里没有原生表格标签这些全靠 flex 布局手动计算改一个数字往往牵一发动全身。react-native-table-component 的解决思路很朴素把一行看作一个横向容器容器内按照你传入的宽度数组逐格渲染行高和列宽全部由数据驱动。你只需要告诉它每列多宽、每行多高、单元格里放什么剩下的布局细节交给组件内部处理。整个库的核心代码只由components/目录下的table.js、rows.js、cols.js、cell.js四个文件构成体积极小不会给你的应用增加负担。三步完成安装与导入在你的 React Native 项目根目录执行下面的命令依赖会自动写入 package.jsonnpm install react-native-table-component --save # 如果习惯用 yarn yarn add react-native-table-component安装完成后从库的统一出口导入所有组件import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from react-native-table-component;你可以把它们理解为不同的积木Row是一块横条Col是一块竖条Cell是最小的格子Table是底板TableWrapper用来把几块积木粘在一起。下面我们先用两块积木拼出第一张表。最小可运行示例一张项目排期表先看一个最简单的场景——团队项目排期表包含表头和三行任务数据import React from react; import { StyleSheet, View } from react-native; import { Table, Row, Rows } from react-native-table-component; const App () { const head [任务, 负责人, 状态]; const data [ [首页改版, 小林, 进行中], [接口联调, 阿珍, 待评审], [上线发版, 老陈, 已完结], ]; return ( View style{styles.page} Table borderStyle{{ borderWidth: 1, borderColor: #e0e0e0 }} Row data{head} style{styles.head} textStyle{styles.text} / Rows data{data} textStyle{styles.text} / /Table /View ); }; const styles StyleSheet.create({ page: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: #fff }, head: { height: 44, backgroundColor: #eef6ff }, text: { margin: 8, textAlign: center }, }); export default App;运行之后你会得到一张带灰色细边框的三列表格。这里有两个值得注意的点Table的borderStyle只需要设置一次它会被自动下发给内部的每一行和每个单元格所以你不需要逐个格子描边textStyle里我用的是margin而不是padding来制造文字内边距这是官方建议的写法。核心 API 拆解这些参数到底在控制什么理解了最小示例我们再逐个拆解每个组件的关键参数。Table边框和样式的总调度Table是容器只接收两个核心属性style容器整体样式背景色、内边距都可以放在这里borderStyle一个对象包含borderWidth和borderColor控制边框粗细与颜色。注意默认borderWidth是 0不传就看不到边框。简单来说Table 像一张底图你画的每一笔边框都会自动复印到内部的每个格子上。Row 与 Rows单行与批量行的选择Row渲染一行Rows是它的批量版本循环渲染多行。它们共享一套参数data数组每个元素渲染成一个单元格widthArr每列宽度数组例如[80, 120, 60]表示三列宽度flexArr每列的 flex 值数组不指定宽度时用 flex 瓜分剩余空间height/heightArr前者是 Row 的单行高度后者是 Rows 里每一行各自的高度textStyle、style分别控制文字和行容器的样式。Rows还多一个cellTextStyle参数它是一个函数可以按行按列返回不同的文字样式适合做条件高亮。Col 与 Cols纵向填充数据当你有一列标题要竖着排列时Col比Row更顺手。Col接收data、width整列宽度、flex列弹性值和heightArr本列每个格子的高度数组。Cols则是多列的组合版本接收widthArr、heightArr、flexArr。需要提醒的是Col和Cols内部的单元格无法做到每行自适应高度如果某些行内容特别长建议用Rows组合替代。Cell 与 TableWrapper打破规则的自由组合Cell是真正的最小单元但它有一个隐藏能力——data除了字符串还可以是任意 React 元素。也就是说你可以在单元格里放按钮、图片、输入框甚至整个组件树这让表格从纯展示升级成可交互。TableWrapper则负责把任意组合粘起来比如左侧一列标题 右侧多行数据。当TableWrapper的父级不是Table时需要手动给它传borderStyle否则没有边框。综合案例可横向滚动、带操作按钮的销售报表把上面的知识点串起来做一个真实业务中很常见的场景——按门店统计的一周销售报表。门店很多需要横向滚动每行末尾还要放一个详情按钮。这个例子用到了 Table、TableWrapper、Row、Cell 的全部组合能力import React from react; import { StyleSheet, View, ScrollView, Text, TouchableOpacity } from react-native; import { Table, TableWrapper, Row, Cell } from react-native-table-component; const App () { const head [门店, 周一, 周二, 周三, 周四, 周五, 周六, 周日]; const widths [80, 60, 60, 60, 60, 60, 60, 60]; const sales [ [静安店, 12, 15, 9, 18, 21, 30, 26], [徐汇店, 8, 11, 14, 12, 19, 24, 22], [浦东店, 20, 17, 13, 16, 15, 28, 31], ]; // 单元格里放一个可点击的按钮 const action (store) ( TouchableOpacity onPress{() alert(${store} 销售详情)} View style{styles.btn} Text style{styles.btnText}详情/Text /View /TouchableOpacity ); return ( View style{styles.page} ScrollView horizontal View Table borderStyle{{ borderWidth: 1, borderColor: #c8c8c8 }} Row data{head} widthArr{widths} style{styles.head} textStyle{styles.text} / {sales.map((item, idx) ( TableWrapper key{idx} style{[styles.line, idx % 2 styles.zebra]} Cell data{item[0]} width{widths[0]} textStyle{styles.text} / {item.slice(1).map((value, j) ( Cell key{j} data{value} width{widths[j 1]} textStyle{styles.text} / ))} Cell data{action(item[0])} width{60} / /TableWrapper ))} /Table /View /ScrollView /View ); }; const styles StyleSheet.create({ page: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: #fff }, head: { height: 44, backgroundColor: #3b5998 }, text: { margin: 8, textAlign: center, color: #333 }, line: { flexDirection: row, height: 44 }, zebra: { backgroundColor: #f7f7f7 }, btn: { width: 52, height: 24, backgroundColor: #5b8def, borderRadius: 4, marginLeft: 6 }, btnText: { color: #fff, textAlign: center, lineHeight: 24, fontSize: 12 }, }); export default App;这个报表实现了三件事外层ScrollView让整张表在门店多时能横向滑动TableWrapper把门店名、销售数据和按钮拼在同一行Cell的data传入按钮组件让每个单元格都可以响应点击。隔行用半透明的底色做了斑马纹视觉上更易读。三个容易踩的坑提前帮你避雷结合官方文档的注意事项这几个坑新手基本都会碰到内边距用 margin 而不是 padding库内部对文字有justifyContent: center的居中处理用padding会导致文字偏移统一在textStyle里用margin调整最稳妥。Col/Cols 不做逐行自适应高度纵向布局的格子高度依赖heightArr显式指定需要自适应行高的场景请改用Rows。父元素不是 Table 时边框会消失TableWrapper直接放在ScrollView里时记得手动补borderStyle{{ borderWidth: 1, borderColor: ... }}否则你会疑惑边框去哪了。总结与延伸一句话总结react-native-table-component 用极小的体积和清晰的组件拆分把 React Native 表格组件的搭建成本降到了最低从简单列表到可交互报表都能一步到位。想继续深入的话可以直接阅读源码里的components/table.js、components/rows.js等文件看它如何用React.cloneElement向下传递borderStyle理解实现细节后你就能基于它封装出自己的通用表格组件了。【免费下载链接】react-native-table-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考