ReactNative表格组件
本⽂原创⾸发于：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 (
<View style={ainer}>
<DataTable
style={ainer}
listViewStyle={ainer}
dataSource={this.state.ds}
renderRow={derRow}
renderHeader={derHeader}
/>
</View>
);
}
renderHeader() {
return (
<Header>
<HeaderCell style={styles.headerCell} key="1" text="选择" width={1} />        <HeaderCell
style={styles.headerCell}
key="2"
text="序号"
width={1}
onPress={() => ColumnSort()}
/>
<HeaderCell
style={styles.headerCell}
key="3"
text="科室名称"
reactnative原生列表width={3}
isAscending={false}
onPress={() => ColumnSort()}
/>
<HeaderCell
style={styles.headerCell}
key="4"
text="数量"
width={1}
isAscending={false}
onPress={() => ColumnSort()}
/>
</Header>
);
}
renderRow(item) {
let rowStyle = %2 === 0  ? styles.whiteRow : w;
return (
<Row style={rowStyle}>
<CheckableCell
style={ll}
width={1}
onPress={() => CheckablePress()}
renderIsChecked={() => (
<Icon name="checkbox-blank-outline" size={20} color="blue" />
)}
renderIsNotChecked={() => (
<Icon name="checkbox-marked" size={20} color="blue" />
)}
isChecked={item.isChecked}
/>
<Cell style={ll} width={1}>
{}
</Cell>
<Cell style={ll} width={3}>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。