想在 React Native 里做表格react-native-table-component 实战上手指南【免费下载链接】react-native-table-componentBuild 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和borderColorTable 会把这套线框规则自动传给内部所有单元格让整张表格的边框保持一致。实战一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-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考