本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。

React Native 表格組件：react-native-data-table，純JS組件，功能強(qiáng)大。支持自定義表頭、行、單元格樣式。支持編輯單元格和選擇列。還能顯示子行。

效果圖

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 (
      <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="序號(hào)"
          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="數(shù)量"
          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文件夾中。請(qǐng)不要吝嗇你們的Star！

組件地址

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

微信不讓跳轉(zhuǎn)外鏈，可以點(diǎn)擊查看原文來查看外鏈GitHub內(nèi)容。

舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開發(fā)圈
[圖片上傳失敗...(image-f07ecb-1518081280042)]