Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
up list-view rn demo
  • Loading branch information
warmhug committed Oct 8, 2016
1 parent 984bcf4 commit c0b4ae4
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 2 deletions.
140 changes: 140 additions & 0 deletions 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) => (
<View key={`${sectionID}-${rowID}`} style={{
backgroundColor: '#F5F5F9',
height: 8,
borderStyle: 'solid',
borderTopWidth: 1,
borderTopColor: '#ECECED',
borderBottomWidth: 1,
borderBottomColor: '#ECECED',
}}></View>
);
const row = (rowData, sectionID, rowID, highlightRow = (sId, rId) => {}) => {
if (index < 0) {
index = data.length - 1;
}
const obj = data[index--];
return (<View key={rowID}>
<TouchableHighlight underlayColor={'rgba(100,100,100,0.2)'}
style={[{
padding: 8,
backgroundColor: 'white',
}]}
onPress={() => {
highlightRow(sectionID, rowID);
}}
>
<View>
<View style={[{
marginBottom: 8,
borderStyle: 'solid',
borderBottomWidth: 1,
borderBottomColor: '#F6F6F6',
}]}>
<Text style={{
fontSize: 18,
fontWeight: '500',
padding: 2,
}}>{obj.title}</Text>
</View>
<View style={[{
flexDirection: 'row',
}]}>
<Image style={[{ height: 64, width: 64, marginRight: 8 }]} source={{ uri: obj.img }} />
<View>
<Text>{obj.des} - {rowID}</Text>
<Text>{this.props.highlightRow}</Text>
<Text><Text style={[{ fontSize: 24, color: '#FF6E27' }]}>35</Text>元/任务</Text>
</View>
</View>
</View>
</TouchableHighlight>
</View>);
};
return (
<ListView
dataSource={this.state.dataSource}
renderHeader={() => <Text>header</Text>}
renderFooter={() => <Text style={{ padding: 30, textAlign: 'center' }}>
{this.state.isLoading ? '加载中...' : '加载完毕'}
</Text>}
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';
7 changes: 5 additions & 2 deletions components/list-view/demo/basic.tsx
Expand Up @@ -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];
Expand Down Expand Up @@ -120,7 +120,7 @@ export default React.createClass({
}]}>
<Image style={[{ height: 64, width: 64, marginRight: 8 }]} source={{ uri: obj.img }} />
<View>
<Text>{obj.des}</Text>
<Text>{obj.des} - {rowID}</Text>
<Text>{this.props.highlightRow}</Text>
<Text><Text style={[{ fontSize: 24, color: '#FF6E27' }]}>35</Text>元/任务</Text>
</View>
Expand All @@ -147,6 +147,9 @@ export default React.createClass({
pageSize={4}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
onChangeVisibleRows={(visibleRows, changedRows) => {
// console.log(visibleRows, changedRows);
}}
/>
);
},
Expand Down
6 changes: 6 additions & 0 deletions rn-kitchen-sink/demoList.js
Expand Up @@ -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: '对话框',
Expand Down

0 comments on commit c0b4ae4

Please sign in to comment.