React|React Native 表格组件 ReactNative表格组件

本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

【React|React Native 表格组件】React Native 表格组件：react-native-data-table，纯JS组件，功能强大。支持自定义表头、行、单元格样式。支持编辑单元格和选择列。还能显示子行。

效果图

文章图片
image.png 安装方法 npm install --save react-native-data-table
组件说明表格组件主要分成以下几部分：
DataTable 表格
HeaderCell 列头
Row 行
Cell 单元格
CheckableCell 可选择单元格
EditableCell 可编辑单元格
Expansion 子行
其他使用方法类似于官方的ListView组件
使用示例

import { Cell, DataTable, Header, HeaderCell, Row, EditableCell, CheckableCell, } from 'react-native-data-table'; render() { return ( ); }renderHeader() { return (this.onColumnSort()} /> this.onColumnSort()} /> this.onColumnSort()} />); }renderRow(item) { let rowStyle = item.no%2 === 0? styles.whiteRow : styles.row; return ( this.onCheckablePress()} renderIsChecked={() => ( )} renderIsNotChecked={() => ( )} isChecked={item.isChecked} /> {item.no} {item.name} {}}> ); }onCheckablePress() {}onColumnSort() {}

完整示例完整代码：https://github.com/forrest23/ReactNativeComponents
本次示例代码在 Component05文件夹中。请不要吝啬你们的Star！
组件地址 https://github.com/sussol/react-native-data-table
微信不让跳转外链，可以点击查看原文来查看外链GitHub内容。
举手之劳关注我的微信公众号：ReactNative开发圈
[图片上传失败...(image-f07ecb-1518081280042)]