企业官网建设流程全解析

React Native 表格组件终极指南：用 react-native-table-component 从零快速搭建数据表格

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

做 React Native 开发时，你是不是也遇到过这样的场景：后端接口数据拿回来了，想用表格展示，结果发现 React Native 连最基础的<table>标签都没有，只能拿一堆<View>和<Text>手撸布局，稍微有点数据量就乱了阵脚。别慌，这就是 react-native-table-component 登场的时候——一个专为 React Native 设计的轻量级表格组件库，用 Table、Row、Col、Cell 几个组件就能拼出规范整齐的数据表格，让你把精力放回业务本身。

什么时候你才真正需要它？先对号入座一下

先想清楚一个问题：你的 App 里真的需要表格吗？如果只是两三个字段的简单列表，用 FlatList 就够了；但当你遇到下面这些情况，手写 View 的成本会迅速失控：

对比同类方案：有些组件库为了追求"全能"，动辄几百 KB，还强制绑定一套状态管理；react-native-table-component 的核心只有 components 目录下的 table.js、rows.js、cols.js、cell.js 四个文件，体积小、零依赖、纯声明式，你传入什么数据它渲染什么结构，简单直接。它的思路不是"给你一个魔法表格"，而是给你一套能自由拼装的积木——理解了这个理念，后面一切用法都顺理成章。

极简三步上手：从安装到跑通第一张表

第 1 步：装进你的项目

在项目根目录执行：

npm install react-native-table-component --save # 或者用 yarn yarn add react-native-table-component

装完就完事了，不需要任何额外配置，因为它是纯 JS 组件，Android 和 iOS 通吃。

第 2 步：一行代码完成导入

在需要用表格的页面里加上这行导入：

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

这七个组件就是全部家当：Table 是容器、Row 管单行、Rows 批量渲染多行、Col 管单列、Cols 批量渲染多列、Cell 是基础单元格、TableWrapper 用于自由组合布局。先记个大概印象，用的时候自然会熟悉。

第 3 步：跑通第一张"有头有数据"的表

这是最经典也最常用的组合——表头用 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 MyTable extends Component { constructor(props) { super(props); this.state = { tableHead: ['姓名', '年龄', '城市'], // 表头数据 tableData: [ // 表格数据（二维数组） ['张三', '25', '北京'], ['李四', '22', '上海'], ['王五', '30', '广州'] ] }; } render() { return ( <View style={styles.container}> <Table borderStyle={{ borderWidth: 1, borderColor: '#c8e1ff' }}> <Row data={this.state.tableHead} style={styles.head} textStyle={styles.text} /> <Rows data={this.state.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' } // 注意：用 margin 调内边距 });

跑起来，一张带浅蓝色边框、表头有底色的小表格就出现了。核心就一句话：Row/Rows 吃二维数组，一层循环替你铺完所有单元格。

进阶玩法：三招让你的表格"活"起来

玩法一：列宽与行高，别让它挤成一团

data只负责内容，排版还得靠三个数组兄弟：widthArr（每列宽度）、heightArr（每行高度）、flexArr（每列弹性比例）。

• 想让"城市"列宽一点，让其他列均分剩余空间？表头给flexArr={[1, 1, 2]}即可；
• 想固定像素宽度？给widthArr={[80, 60, 120]}；
• 想让每行高度不同？Rows支持heightArr={[40, 50, 60]}。

避坑提醒：widthArr、flexArr必须和列数一一对应，长度不匹配会导致列错位，这算新手最常见的翻车现场了。

玩法二：表头固定 + 横向滚动，告别"数据多到看不见"

移动端屏幕窄，列数一多就只能横向滚。经典做法是表头单独放一个 Table，数据区放在横向 ScrollView 里——这正是 readme 中示例三的思路：

<ScrollView horizontal={true}> <View> {/* 表头固定，不随数据滚动 */} <Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}> <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text} /> </Table> {/* 数据区独立纵向滚动，左右滑动时表头也跟着动 */} <ScrollView style={styles.dataWrapper}> <Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}> {tableData.map((rowData, index) => ( <Row key={index} data={rowData} widthArr={state.widthArr} textStyle={styles.text} /> ))} </Table> </ScrollView> </View> </ScrollView>

配合index % 2给偶数行加底色，斑马纹效果顺带也出来了。核心心法：表头和数据是两个独立 Table，横向滚动的是整个 View 块。

玩法三：Cell 里塞组件，表格瞬间变成"操作面板"

这是最实用的一招：Cell 的 data 属性不仅能放字符串，还能直接放一个 React 元素（v1.1.1 起支持）。于是"查看""编辑""删除"按钮就能直接住在表格里：

const element = (index) => ( <TouchableOpacity onPress={() => Alert.alert(`这是第 ${index + 1} 行`)}> <View style={styles.btn}> <Text style={styles.btnText}>操作</Text> </View> </TouchableOpacity> ); // 在 TableWrapper + Cell 的自由组合中指定某一格渲染按钮 rowData.map((cellData, cellIndex) => ( <Cell key={cellIndex} data={cellIndex === 3 ? element(index) : cellData} /> ));

踩坑提醒：官方文档明确提示——Col 和 Cols 里的单元格无法做到每行自适应高度，所以带按钮、图片这类复杂内容的行，建议用 Row/TableWrapper 组合而不是 Cols，否则高度会被截断。

真实落地案例：给内部工具配一张"库存看板"

把前面的知识点串起来，做一个带表头、带操作按钮、可横向滚动的库存报表页：

import React, { Component } from 'react'; import { StyleSheet, View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native'; import { Table, TableWrapper, Row, Cell } from 'react-native-table-component'; export default class InventoryBoard extends Component { render() { const head = ['商品', '库存', '预警线', '状态', '操作']; const data = [ ['蓝牙耳机', '120', '50', '充足'], ['机械键盘', '18', '30', '偏低'], ['显示器', '6', '10', '告急'] ]; const actionBtn = (name) => ( <TouchableOpacity onPress={() => Alert.alert(`补货：${name}`)}> <View style={styles.btn}><Text style={styles.btnText}>补货</Text></View> </TouchableOpacity> ); return ( <View style={styles.container}> <ScrollView horizontal={true}> <View> <Table borderStyle={{ borderWidth: 1, borderColor: '#c8e1ff' }}> <Row data={head} flexArr={[2, 1, 1, 1, 1]} style={styles.head} textStyle={styles.text} /> </Table> <Table borderStyle={{ borderWidth: 1, borderColor: '#c8e1ff' }}> {data.map((row, i) => ( <TableWrapper key={i} style={[styles.row, i % 2 && { backgroundColor: '#f7f8fa' }]}> {row.map((cell, j) => ( <Cell key={j} data={j === 4 ? actionBtn(row[0]) : cell} flex={j === 0 ? 2 : 1} textStyle={styles.text} /> ))} </TableWrapper> ))} </Table> </View> </ScrollView> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#fff' }, head: { height: 40, backgroundColor: '#eaf4ff' }, row: { flexDirection: 'row', minHeight: 44 }, text: { margin: 8, textAlign: 'center' }, btn: { padding: 4, backgroundColor: '#78b7bb', borderRadius: 4 }, btnText: { color: '#fff', fontSize: 13 } });

你看，一张带弹性列宽、斑马纹、可横向滚动、每行带补货按钮的库存看板，加起来不到 50 行业务代码，逻辑全在数据里，组件只负责呈现。

常见问题速查

Q1：为什么我给 textStyle 设 padding 没效果？官方明确建议在textStyle里用margin调整内边距，不要用padding，这是组件内部样式设计决定的。

Q2：Col/Cols 里单元格内容超高被截断了怎么办？Col/Cols 不支持每行自适应高度（readme 注意事项原文），改用它和 Row 或 TableWrapper + Cell 的组合。

Q3：把组件用在 Table 外面，为什么没边框？Table会自动把borderStyle传递给子组件；如果父元素不是 Table，需要手动给 TableWrapper 设置borderStyle，否则默认borderWidth为 0。

Q4：默认有没有边框？没有。v1.2.1 起borderWidth默认值从 1 改成了 0，记得显式传入borderStyle={{ borderWidth: 1, borderColor: '#000' }}。

Q5：数据里能放富文本或图片吗？能。任何能作为 React 元素渲染的内容都可以放进data，表格内容完全由你控制。

结语：别在表格上重复造轮子了

表格的难点从来不在"画格子"，而在列宽对齐、表头固定、行高适配这些琐碎细节上。react-native-table-component 用最轻的方式替你解决了这些，剩下的就是把你的数据喂给它。核心源码就在components/目录下，总共四个文件，读一遍你甚至能完全掌握它的实现思路。下次再遇到"App 里要个表格"的需求，别再手撸 View 了，先想想这张表该长什么样，然后把积木拼起来吧。

需要源码时可通过git clone https://gitcode.com/gh_mirrors/re/react-native-table-component拉取，配合readme.md里的五个官方示例边看边跑，很快你就能玩出自己的表格。

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