React Native 表格组件

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

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

效果图

安装方法

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 (
      <View style={styles.container}>
        <DataTable
          style={styles.container}
          listViewStyle={styles.container}
          dataSource={this.state.ds}
          renderRow={this.renderRow}
          renderHeader={this.renderHeader}
        />
      </View>
    );
  }

  renderHeader() {
    return (
      <Header>
        <HeaderCell style={styles.headerCell} key="1" text="选择" width={1} />
        <HeaderCell
          style={styles.headerCell}
          key="2"
          text="序号"
          width={1}
          onPress={() => this.onColumnSort()}
        />
        <HeaderCell
          style={styles.headerCell}
          key="3"
          text="科室名称"
          width={3}
          isAscending={false}
          onPress={() => this.onColumnSort()}
        />
        <HeaderCell
          style={styles.headerCell}
          key="4"
          text="数量"
          width={1}
          isAscending={false}
          onPress={() => this.onColumnSort()}
        />
      </Header>
    );
  }

  renderRow(item) {
    let rowStyle = item.no%2 === 0  ? styles.whiteRow : styles.row;
    return (
      <Row style={rowStyle}>
        <CheckableCell
          style={styles.cell}
          width={1}
          onPress={() => this.onCheckablePress()}
          renderIsChecked={() => (
            <Icon name="checkbox-blank-outline" size={20} color="blue" />
          )}
          renderIsNotChecked={() => (
            <Icon name="checkbox-marked" size={20} color="blue" />
          )}
          isChecked={item.isChecked}
        />
        <Cell style={styles.cell} width={1}>
          {item.no}
        </Cell>
        <Cell style={styles.cell} width={3}>
          {item.name}
        </Cell>
        <EditableCell width={1} value={item.qty} onEndEditing={(target, value) => {}}>
        </EditableCell>
      </Row>
    );
  }

  onCheckablePress() {}

  onColumnSort() {}

完整示例

完整代码:https://github.com/forrest23/ReactNativeComponents 本次示例代码在 Component05文件夹中。请不要吝啬你们的Star

组件地址

https://github.com/sussol/react-native-data-table

原文发布于微信公众号 - ReactNative开发圈(ReactNative-Circle)

原文发表时间:2018-02-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React第三方组件5(状态管理之Redux的使用④TodoList下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

38650
来自专栏郭耀华‘s Blog

android 小知识点

1、 最近翻看以前的项目时候,想更改下布局文件,谁知道就改了个参数就提示如下的报错,百思不得其解,原来是这样解决的。小记一下。 更改layout的xml之后...

28760
来自专栏九彩拼盘的叨叨叨

Firefox 使用小技巧

Sage: 体验性上,还是没有一些专业做rss 阅读器的好,比如feedly 以及 鲜果

8020
来自专栏非著名程序员

基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...

22270
来自专栏前端侠2.0

draggable 属性 原

昨天是在document上绑定mousedown ,mousemove ,mouseup事件,来实时计算,并设置相应元素的宽度,这是最直接想到的办法,就不再多说...

18910
来自专栏Golang语言社区

golang zip 压缩,解压(含目录文件)

46620
来自专栏偏前端工程师的驿站

前端魔法堂:解秘FOUC

前言  对于问题多多的IE678,FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题,但对于ever gree...

20970
来自专栏Python研发

购物时添加数量

9710
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

11920
来自专栏云端架构

【云端架构】基于html5的本地多图上传并可在线预览

免插件多图上传的代码是通过html5将本地图片上传服务器,并实现上传之前的图片预览。本文只提供前端代码,后台代码自己研究哈。

45380

扫码关注云+社区

领取腾讯云代金券