React Native 表格组件

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

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)]