首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native 表格组件

React Native 表格组件

作者头像
forrest23
发布2018-08-03 15:13:40
1.7K0
发布2018-08-03 15:13:40
举报

本文原创首发于公众号: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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-02-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 ReactNative开发圈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 安装方法
  • 组件说明
    • 表格组件主要分成以下几部分:
    • 使用示例
    • 完整示例
    • 组件地址
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档