React Native 表格组件完整上手指南Table、Rows、Cols、Cell 一网打尽【免费下载链接】react-native-table-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component如果你负责过一个订单管理类 App大概经历过这样的时刻后端接口返回了三十条订单数据你要把它们摆成规规矩矩的表格——表头一行、数据若干行、列要对齐、边框要统一。于是你打开编辑器开始用View套View、Text套Text再补上各种borderWidth和flex。表格画出来那一刻确实挺有成就感可一旦数据多起来行高开始错位边框开始重影左右滑动时表头还不跟着走。这时候你大概会想React Native 里就没有一个现成的表格组件吗有而且很轻。今天要聊的react-native-table-component就是专门为 React Native 场景设计的表格组件库核心代码只有components/table.js、components/rows.js、components/cols.js、components/cell.js四个文件。如果你手头的项目是中小型表格、需要快速出效果并且不想引入动辄几百 KB 的重型数据表格库它非常适合你。安装、导入、三步跑通剩下的时间都可以用来打磨样式。三步跑通第一个表格最小可运行示例老规矩先让效果跑起来再讲道理。安装只需要一条命令npm install react-native-table-component --save然后复制下面这段代码替换掉 App 组件的默认内容。这是一个订单列表表头四列、数据三行跑起来你就能看到一张有边框、有底色、文字居中的标准表格import React, { Component } from react; import { StyleSheet, View } from react-native; import { Table, Row, Rows } from react-native-table-component; export default class App extends Component { state { head: [订单号, 商品, 数量, 金额], rows: [ [A1001, 手机, 2, ¥5998], [A1002, 耳机, 5, ¥1995], [A1003, 充电器, 10, ¥990], ], }; render() { const { head, rows } this.state; return ( View style{styles.container} Table borderStyle{{ borderWidth: 1, borderColor: #dcdcdc }} Row data{head} style{styles.head} textStyle{styles.text} / Rows data{rows} textStyle{styles.text} / /Table /View ); } } const styles StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: #fff }, head: { height: 40, backgroundColor: #f0f6ff }, // 表头底色和行高 text: { margin: 8, textAlign: center }, // 单元格文字样式 });这段代码里其实藏了这套组件的全部设计思想值得拆开看三个点Table是边框的总开关。你只需要在borderStyle里写一次borderWidth和borderColor它会把这份边框设置自动下发给内部每一个单元格你完全不用为每条边单独操心。默认边框宽度是 0也就是说你不传borderStyle表格就是隐形的想要格子线就自己开。Row管一行Rows管多行。Row data{head} /负责表头Rows data{rows} /接收一个二维数组内部会自动把每一行渲染成一个Row再为每个元素生成一个Cell。数据驱动循环都不用你写。textStyle是全局文字样式。它会被下发到所有单元格表头和数据行分别传各自的style容器样式和textStyle文字样式互不干扰。分场景进阶从订单列表到复杂报表基础表格跑通之后真正的挑战才开始列太多怎么办想加固定标题列怎么做单元格里能不能放按钮下面按真实业务场景逐个拆解。场景一列数太多装不下横向滚动表格这样做数据列一旦超过屏幕宽度你就需要一个能左右滑动的表格。思路是把表格包进ScrollView horizontal同时用widthArr给每一列指定固定宽度否则格子会被压缩得没法看import { ScrollView } from react-native; const head [日期, 订单数, GMV, 退款, 客单价, 转化率, 新客数]; const widthArr [80, 80, 90, 80, 90, 90, 80]; // 列宽数组和表头一一对应 render() { return ( ScrollView horizontal{true} Table borderStyle{{ borderWidth: 1, borderColor: #C1C0B9 }} Row data{head} widthArr{widthArr} style{styles.header} textStyle{styles.text} / Rows data{this.state.rows} widthArr{widthArr} textStyle{styles.text} / /Table /ScrollView ); }为什么要widthArr因为Table内部用的是 flex 布局不指定宽度时各列会平分宽度而横向滚动的前提是内容宽度超出容器所以你必须用固定宽度把表格撑出来。这里有个小技巧表头Row和数据Rows要传同一个widthArr两边列宽才会严丝合缝地对齐。场景二需要左侧固定标题列用 Row Col 组合拳报表类页面经常有这种布局最左边是一列行标题比如上午、下午、晚上右边才是真正的数据区。实现它不需要任何第三方扩展把Col和Rows并排塞进一个TableWrapper就行import { Table, TableWrapper, Row, Col, Rows } from react-native-table-component; Table borderStyle{{ borderWidth: 1 }} Row data{[, 周一, 周二, 周三]} style{styles.head} textStyle{styles.text} / TableWrapper style{styles.wrapper} Col data{[上午, 下午, 晚上]} style{styles.title} heightArr{[36, 36, 36]} textStyle{styles.text} / Rows data{tableData} heightArr{[36, 36, 36]} style{styles.row} textStyle{styles.text} / /TableWrapper /Table关键点是heightArr它按行给高度Col和右侧Rows的heightArr保持一致行与行才能对齐。TableWrapper在这里充当一行内的左右分区角色它的flexDirection: row让左侧标题列和右侧数据区并排显示而Table会继续把borderStyle透传给里面的每一个格子边框依然整齐。场景三单元格想放按钮和开关把 React 元素交给 Cell这是这个库最有用的能力之一单元格的data不一定是字符串它可以是任意 React 元素。所以操作列里的删除按钮、编辑按钮都可以直接作为数据塞进去import { Cell } from react-native-table-component; const renderAction (data, index) ( TouchableOpacity onPress{() Alert.alert(删除第 (index 1) 行)} View style{styles.btn} Text style{styles.btnText}删除/Text /View /TouchableOpacity ); Table borderStyle{{ borderColor: transparent }} Row data{[姓名, 部门, 操作]} style{styles.head} textStyle{styles.text} / {tableData.map((row, i) ( TableWrapper key{i} style{styles.row} {row.map((cell, j) ( Cell key{j} data{j 2 ? renderAction(cell, i) : cell} textStyle{styles.text} / ))} /TableWrapper ))} /Table注意Cell的判定逻辑如果data是合法 React 元素它就直接渲染这个元素不再包一层Text。所以你可以把TouchableOpacity、Switch、甚至一个迷你图表组件原样丢进去。表头Row负责三列表头下面的数据行用TableWrapper手工组装Cell这样你就能精确控制哪一列放什么。场景四斑马纹与自定义边框的样式定制表格的颜值决定了报表的专业度。这个库把样式自由度基本都交还给了开发者行背景、文字颜色、边框粗细都可以按你自己的想法来。比如隔行变色斑马纹只需要在渲染行时动态拼一个条件样式Table borderStyle{{ borderWidth: 1, borderColor: #ccc }} {rows.map((row, index) ( Row key{index} data{row} style{[styles.row, index % 2 { backgroundColor: #F7F6E7 }]} // 奇数行换底色 textStyle{styles.text} / ))} /Table再比如你想做那种无边框、靠底色分区的清爽风格把borderStyle里的borderColor设成transparent即可边框线会被画成透明的单元格之间看起来就是干净的分区而不是一个个方格子。新手避坑三个最常见的表格样式问题用这个库踩坑的人很多下面三个问题是最高频的提前知道能省下半天调试时间。1. 调整文字内边距用margin别用padding。这是官方文档明确提醒过的。单元格内部的Text默认不带内边距你想让文字离格子边框远一点就在textStyle里写margin: 8而不要试图给容器加padding——因为布局计算方式不同加padding很容易让格子尺寸异常、边框错位。2.Col和Cols里的单元格不支持自适应高度。Row和Rows可以根据内容撑高但Col系列不行你必须用heightArr给每一行指定明确高度否则列内单元格的高度会乱。所以只要用了Col就老老实实把heightArr配齐。3. 边框不会自己长出来取决于父组件。borderStyle的透传机制依赖父组件是Table。一旦你把Cols或Rows直接放进ScrollView、View这类普通容器边框就断档了需要手动给TableWrapper补一份borderStyle例如TableWrapper borderStyle{{borderWidth: 2, borderColor: blue}}。收尾记住这三个核心认知回看整个使用过程你会发现这个库的设计哲学很朴素Table管边框Row/Rows管行Col/Cols管列Cell管最小单元任何复杂表格都是这几种组件的自由组合。它不追求大而全而是把数据驱动和样式透传这两个点做到位剩下的交给你的创造力。如果你想知道某个属性究竟是怎么被处理的直接读源码是最快的路径components/table.js里能看到边框如何下发components/rows.js和components/cols.js里能看到widthArr、heightArr、flexArr如何被消费components/cell.js里藏着元素与文本双渲染的判断逻辑。也可以git clone https://gitcode.com/gh_mirrors/re/react-native-table-component把仓库拉下来对照readme.md里的示例跑一跑。表格这件事跑通一个 Demo就胜过读十遍文档。【免费下载链接】react-native-table-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React Native 表格组件完整上手指南：Table、Rows、Cols、Cell 一网打尽
React Native 表格组件完整上手指南Table、Rows、Cols、Cell 一网打尽【免费下载链接】react-native-table-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component如果你负责过一个订单管理类 App大概经历过这样的时刻后端接口返回了三十条订单数据你要把它们摆成规规矩矩的表格——表头一行、数据若干行、列要对齐、边框要统一。于是你打开编辑器开始用View套View、Text套Text再补上各种borderWidth和flex。表格画出来那一刻确实挺有成就感可一旦数据多起来行高开始错位边框开始重影左右滑动时表头还不跟着走。这时候你大概会想React Native 里就没有一个现成的表格组件吗有而且很轻。今天要聊的react-native-table-component就是专门为 React Native 场景设计的表格组件库核心代码只有components/table.js、components/rows.js、components/cols.js、components/cell.js四个文件。如果你手头的项目是中小型表格、需要快速出效果并且不想引入动辄几百 KB 的重型数据表格库它非常适合你。安装、导入、三步跑通剩下的时间都可以用来打磨样式。三步跑通第一个表格最小可运行示例老规矩先让效果跑起来再讲道理。安装只需要一条命令npm install react-native-table-component --save然后复制下面这段代码替换掉 App 组件的默认内容。这是一个订单列表表头四列、数据三行跑起来你就能看到一张有边框、有底色、文字居中的标准表格import React, { Component } from react; import { StyleSheet, View } from react-native; import { Table, Row, Rows } from react-native-table-component; export default class App extends Component { state { head: [订单号, 商品, 数量, 金额], rows: [ [A1001, 手机, 2, ¥5998], [A1002, 耳机, 5, ¥1995], [A1003, 充电器, 10, ¥990], ], }; render() { const { head, rows } this.state; return ( View style{styles.container} Table borderStyle{{ borderWidth: 1, borderColor: #dcdcdc }} Row data{head} style{styles.head} textStyle{styles.text} / Rows data{rows} textStyle{styles.text} / /Table /View ); } } const styles StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 40, backgroundColor: #fff }, head: { height: 40, backgroundColor: #f0f6ff }, // 表头底色和行高 text: { margin: 8, textAlign: center }, // 单元格文字样式 });这段代码里其实藏了这套组件的全部设计思想值得拆开看三个点Table是边框的总开关。你只需要在borderStyle里写一次borderWidth和borderColor它会把这份边框设置自动下发给内部每一个单元格你完全不用为每条边单独操心。默认边框宽度是 0也就是说你不传borderStyle表格就是隐形的想要格子线就自己开。Row管一行Rows管多行。Row data{head} /负责表头Rows data{rows} /接收一个二维数组内部会自动把每一行渲染成一个Row再为每个元素生成一个Cell。数据驱动循环都不用你写。textStyle是全局文字样式。它会被下发到所有单元格表头和数据行分别传各自的style容器样式和textStyle文字样式互不干扰。分场景进阶从订单列表到复杂报表基础表格跑通之后真正的挑战才开始列太多怎么办想加固定标题列怎么做单元格里能不能放按钮下面按真实业务场景逐个拆解。场景一列数太多装不下横向滚动表格这样做数据列一旦超过屏幕宽度你就需要一个能左右滑动的表格。思路是把表格包进ScrollView horizontal同时用widthArr给每一列指定固定宽度否则格子会被压缩得没法看import { ScrollView } from react-native; const head [日期, 订单数, GMV, 退款, 客单价, 转化率, 新客数]; const widthArr [80, 80, 90, 80, 90, 90, 80]; // 列宽数组和表头一一对应 render() { return ( ScrollView horizontal{true} Table borderStyle{{ borderWidth: 1, borderColor: #C1C0B9 }} Row data{head} widthArr{widthArr} style{styles.header} textStyle{styles.text} / Rows data{this.state.rows} widthArr{widthArr} textStyle{styles.text} / /Table /ScrollView ); }为什么要widthArr因为Table内部用的是 flex 布局不指定宽度时各列会平分宽度而横向滚动的前提是内容宽度超出容器所以你必须用固定宽度把表格撑出来。这里有个小技巧表头Row和数据Rows要传同一个widthArr两边列宽才会严丝合缝地对齐。场景二需要左侧固定标题列用 Row Col 组合拳报表类页面经常有这种布局最左边是一列行标题比如上午、下午、晚上右边才是真正的数据区。实现它不需要任何第三方扩展把Col和Rows并排塞进一个TableWrapper就行import { Table, TableWrapper, Row, Col, Rows } from react-native-table-component; Table borderStyle{{ borderWidth: 1 }} Row data{[, 周一, 周二, 周三]} style{styles.head} textStyle{styles.text} / TableWrapper style{styles.wrapper} Col data{[上午, 下午, 晚上]} style{styles.title} heightArr{[36, 36, 36]} textStyle{styles.text} / Rows data{tableData} heightArr{[36, 36, 36]} style{styles.row} textStyle{styles.text} / /TableWrapper /Table关键点是heightArr它按行给高度Col和右侧Rows的heightArr保持一致行与行才能对齐。TableWrapper在这里充当一行内的左右分区角色它的flexDirection: row让左侧标题列和右侧数据区并排显示而Table会继续把borderStyle透传给里面的每一个格子边框依然整齐。场景三单元格想放按钮和开关把 React 元素交给 Cell这是这个库最有用的能力之一单元格的data不一定是字符串它可以是任意 React 元素。所以操作列里的删除按钮、编辑按钮都可以直接作为数据塞进去import { Cell } from react-native-table-component; const renderAction (data, index) ( TouchableOpacity onPress{() Alert.alert(删除第 (index 1) 行)} View style{styles.btn} Text style{styles.btnText}删除/Text /View /TouchableOpacity ); Table borderStyle{{ borderColor: transparent }} Row data{[姓名, 部门, 操作]} style{styles.head} textStyle{styles.text} / {tableData.map((row, i) ( TableWrapper key{i} style{styles.row} {row.map((cell, j) ( Cell key{j} data{j 2 ? renderAction(cell, i) : cell} textStyle{styles.text} / ))} /TableWrapper ))} /Table注意Cell的判定逻辑如果data是合法 React 元素它就直接渲染这个元素不再包一层Text。所以你可以把TouchableOpacity、Switch、甚至一个迷你图表组件原样丢进去。表头Row负责三列表头下面的数据行用TableWrapper手工组装Cell这样你就能精确控制哪一列放什么。场景四斑马纹与自定义边框的样式定制表格的颜值决定了报表的专业度。这个库把样式自由度基本都交还给了开发者行背景、文字颜色、边框粗细都可以按你自己的想法来。比如隔行变色斑马纹只需要在渲染行时动态拼一个条件样式Table borderStyle{{ borderWidth: 1, borderColor: #ccc }} {rows.map((row, index) ( Row key{index} data{row} style{[styles.row, index % 2 { backgroundColor: #F7F6E7 }]} // 奇数行换底色 textStyle{styles.text} / ))} /Table再比如你想做那种无边框、靠底色分区的清爽风格把borderStyle里的borderColor设成transparent即可边框线会被画成透明的单元格之间看起来就是干净的分区而不是一个个方格子。新手避坑三个最常见的表格样式问题用这个库踩坑的人很多下面三个问题是最高频的提前知道能省下半天调试时间。1. 调整文字内边距用margin别用padding。这是官方文档明确提醒过的。单元格内部的Text默认不带内边距你想让文字离格子边框远一点就在textStyle里写margin: 8而不要试图给容器加padding——因为布局计算方式不同加padding很容易让格子尺寸异常、边框错位。2.Col和Cols里的单元格不支持自适应高度。Row和Rows可以根据内容撑高但Col系列不行你必须用heightArr给每一行指定明确高度否则列内单元格的高度会乱。所以只要用了Col就老老实实把heightArr配齐。3. 边框不会自己长出来取决于父组件。borderStyle的透传机制依赖父组件是Table。一旦你把Cols或Rows直接放进ScrollView、View这类普通容器边框就断档了需要手动给TableWrapper补一份borderStyle例如TableWrapper borderStyle{{borderWidth: 2, borderColor: blue}}。收尾记住这三个核心认知回看整个使用过程你会发现这个库的设计哲学很朴素Table管边框Row/Rows管行Col/Cols管列Cell管最小单元任何复杂表格都是这几种组件的自由组合。它不追求大而全而是把数据驱动和样式透传这两个点做到位剩下的交给你的创造力。如果你想知道某个属性究竟是怎么被处理的直接读源码是最快的路径components/table.js里能看到边框如何下发components/rows.js和components/cols.js里能看到widthArr、heightArr、flexArr如何被消费components/cell.js里藏着元素与文本双渲染的判断逻辑。也可以git clone https://gitcode.com/gh_mirrors/re/react-native-table-component把仓库拉下来对照readme.md里的示例跑一跑。表格这件事跑通一个 Demo就胜过读十遍文档。【免费下载链接】react-native-table-componentBuild table for react native项目地址: https://gitcode.com/gh_mirrors/re/react-native-table-component创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考