diff --git a/components/list-view/demo/basic-row.tsx b/components/list-view/demo/basic-row.tsx new file mode 100644 index 0000000000..b6863195cd --- /dev/null +++ b/components/list-view/demo/basic-row.tsx @@ -0,0 +1,140 @@ +import React from 'react'; +import { View, Text, TouchableHighlight, Image } from 'react-native'; +import { ListView } from 'antd-mobile'; +import assign from 'object-assign'; + +const data = [ + { + img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png', + title: '相约酒店', + des: '不是所有的兼职汪都需要风吹日晒', + }, + { + img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', + title: '麦当劳邀您过周末', + des: '不是所有的兼职汪都需要风吹日晒', + }, + { + img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', + title: '食惠周', + des: '不是所有的兼职汪都需要风吹日晒', + }, +]; +let index = data.length - 1; + +const NUM_ROWS = 20; +let pageIndex = 0; + +export default React.createClass({ + getInitialState() { + const dataSource = new ListView.DataSource({ + rowHasChanged: (row1, row2) => row1 !== row2, + }); + + this.genData = (pIndex = 0) => { + const dataBlob = {}; + for (let i = 0; i < NUM_ROWS; i++) { + const ii = (pIndex * NUM_ROWS) + i; + dataBlob[`${ii}`] = `row - ${ii}`; + } + return dataBlob; + }; + this.rData = {}; + return { + dataSource: dataSource.cloneWithRows(this.genData()), + isLoading: false, + }; + }, + + onEndReached(event) { + // load new data + // console.log('reach end', event); + this.setState({ isLoading: true }); + setTimeout(() => { + this.rData = assign({}, this.rData, this.genData(++pageIndex)); + this.setState({ + dataSource: this.state.dataSource.cloneWithRows(this.rData), + isLoading: false, + }); + }, 1000); + }, + + render() { + const separator = (sectionID, rowID) => ( + + ); + const row = (rowData, sectionID, rowID, highlightRow = (sId, rId) => {}) => { + if (index < 0) { + index = data.length - 1; + } + const obj = data[index--]; + return ( + { + highlightRow(sectionID, rowID); + }} + > + + + {obj.title} + + + + + {obj.des} - {rowID} + {this.props.highlightRow} + 35元/任务 + + + + + ); + }; + return ( + header} + renderFooter={() => + {this.state.isLoading ? '加载中...' : '加载完毕'} + } + renderRow={row} + renderSeparator={separator} + pageSize={4} + scrollRenderAheadDistance={500} + scrollEventThrottle={20} + onEndReached={this.onEndReached} + onEndReachedThreshold={10} + onChangeVisibleRows={(visibleRows, changedRows) => { + /* tslint no-console: 0 */ + // console.log(visibleRows, changedRows); + }} + /> + ); + }, +}); + +export const title = 'ListView Row'; +export const description = 'ListView Row example'; diff --git a/components/list-view/demo/basic.tsx b/components/list-view/demo/basic.tsx index faa4e7cef4..dcf91b0fea 100644 --- a/components/list-view/demo/basic.tsx +++ b/components/list-view/demo/basic.tsx @@ -25,7 +25,7 @@ const NUM_SECTIONS = 5; const NUM_ROWS_PER_SECTION = 5; let pageIndex = 0; -export default React.createClass({ +export default React.createClass({ getInitialState() { const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID]; const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID]; @@ -120,7 +120,7 @@ export default React.createClass({ }]}> - {obj.des} + {obj.des} - {rowID} {this.props.highlightRow} 35元/任务 @@ -147,6 +147,9 @@ export default React.createClass({ pageSize={4} onEndReached={this.onEndReached} onEndReachedThreshold={10} + onChangeVisibleRows={(visibleRows, changedRows) => { + // console.log(visibleRows, changedRows); + }} /> ); }, diff --git a/rn-kitchen-sink/demoList.js b/rn-kitchen-sink/demoList.js index e20b9a4acb..9a567cb536 100644 --- a/rn-kitchen-sink/demoList.js +++ b/rn-kitchen-sink/demoList.js @@ -50,6 +50,12 @@ module.exports = { icon: 'https://zos.alipayobjects.com/rmsportal/lMztpIPTRAIWGIP.png', module: require('../components/list-view/demo/basic'), }, + { + title: 'ListView (only row)', + description: '长列表', + icon: 'https://zos.alipayobjects.com/rmsportal/lMztpIPTRAIWGIP.png', + module: require('../components/list-view/demo/basic-row'), + }, { title: 'Modal', description: '对话框',