如何在 React Native 中添加表格？

添加表格是日常工作中十分常见的任务，本文将介绍如何在 React Native 中添加表格。

步骤

1、安装 react-native-table-component

React Native 没有原生的表格组件，不过可以通过第三方库 react-native-table-component 实现表格的展示和交互。在终端中输入以下命令安装 react-native-table-component：

npm install react-native-table-component --save

2、导入组件

在需要使用表格的区域中，导入 react-native-table-component 组件：

import { Table, Row, Rows } from 'react-native-table-component';

3、设置数据源

定义一个二维数组作为表格的数据源，每个一维数组代表一行数据，每个元素代表一列数据。例如，下面是一个 4 行 3 列的表格数据：

const tableData = [
  ['姓名', '性别', '年龄'],
  ['张三', '男', '18'],
  ['李四', '女', '23'],
  ['王五', '男', '31']
];

4、渲染组件

定义一个 Table 组件，设置表格的样式、表头和数据源，如下所示：

<Table style={{margin: 10}}>
  <Row data={tableData[0]} style={styles.head} textStyle={styles.text}/>
  <Rows data={tableData.slice(1)} textStyle={styles.text}/>
</Table>

其中，Row 组件渲染表头，Rows 组件渲染数据行，head 和 text 是自定义的样式，如下：

const styles = StyleSheet.create({
  head: {
    backgroundColor: '#f1f8ff'
  },
  text: {
    margin: 6,
    textAlign: 'center'
  }
});

完整示例

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 {
  render() {
    const tableData = [
      ['姓名', '性别', '年龄'],
      ['张三', '男', '18'],
      ['李四', '女', '23'],
      ['王五', '男', '31']
    ];
    return (
      <View style={styles.container}>
        <Table style={{margin: 10}}>
          <Row data={tableData[0]} style={styles.head} textStyle={styles.text}/>
          <Rows data={tableData.slice(1)} textStyle={styles.text}/>
        </Table>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  head: {
    backgroundColor: '#f1f8ff'
  },
  text: {
    margin: 6,
    textAlign: 'center'
  }
});

总结

React Native 中添加表格使用第三方库 react-native-table-component，该库提供了 Table、Row 和 Rows 组件，可以很方便地实现表格的展示和交互。