在 FlatList 基础上封装的表格组件,支持树形数据的渲染。
Installnpm install react-native-tree-table --save Usage
使用树形结构的数据
import Table from 'react-native-tree-table '; const data2 = [ { name: 'Akira', age: 13, birth: '1995年4月29日', position: '舞蹈', group: 'SNH48 Team NII', id: '1', children: [ { name: 'Akira2', birth: '1996年5月11日', age: 23, position: '舞蹈', group: 'SNH48 Team SII', id: '90' }, { name: 'Akira3', birth: '1996年5月11日', age: 23, position: '舞蹈', group: 'SNH48 Team SII', id: '51' } ] }, { name: 'Tako', birth: '1996年5月11日', age: 23, position: '舞蹈', group: 'SNH48 Team SII', id: '2' }, { name: 'Bee', age: 33, birth: '1992年4月11日', position: 'Vocal', group: 'SNH48 Team SII', id: '3', children: [ { name: 'Bee2', age: 1, birth: '1995年8月27日', position: '舞蹈,Rapper', group: 'SNH48 Team SII', id: '23' } ] }, { name: 'Kiki', age: 1, birth: '1995年8月27日', position: '舞蹈,Rapper', group: 'SNH48 Team SII', id: '4' } ]; const columns2 = [ { propName: 'name', title: '名称', style: { width: 120 } }, { propName: 'age', title: '年龄', style: { width: 70 } }, { propName: 'birth', title: '出生地', style: { width: 150 } }, { propName: 'position', title: '队内担当' }, { propName: 'group', title: '所属团体' } ]; <Table dataSource={data} columns={columns} />
参数名 | 说明 | 类型 |
---|---|---|
dataSource | 渲染表格的数据 | Array |
columns | 表格列的配置项(类似antd的columns) | Array |
配置名 | 说明 | 类型 |
---|---|---|
propName | 属性的键 | String |
title | 对应的键的表头描述 | String |
style | 列的样式 | Style |
valTransform | 对应的值的转换 | Funciton(item,index) |
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。