Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
*
* Created by Stone
* Email: bolan999999@gmail.com
* Date: 2017/12/2
*
*/
import React from 'react';
import {LargeList} from 'react-native-largelist';
// import { LargeList } from "react-native-largelist";
import {Text, TouchableOpacity, View} from 'react-native';
class LargeListSample extends React.Component {
color;
minCellHeight = 24;
maxCellHeight = 48;
minSectionHeight = 48;
maxSectionHeight = 96;
refreshing = false;
largeList: LargeList;
constructor(props) {
super(props);
this.state = {refreshing: false};
}
render() {
console.log("And it renders!");
return (
<LargeList
style={{flex: 1}}
ref={ref => (this.largeList = ref)}
bounces={true}
refreshing={this.state.refreshing}
nativeOptimize={this.props.nativeOptimize}
onRefresh={() => {
this.setState({refreshing: true});
setTimeout(() => this.setState({refreshing: false}), 2000);
}}
numberOfRowsInSection={section => this.props.numberOfEachSection}
numberOfSections={() => this.props.numberOfSections}
heightForCell={(section, row) =>
row % 2 ? this.minCellHeight : this.maxCellHeight}
renderCell={this.renderItem.bind(this)}
heightForSection={section =>
section % 2 ? this.minSectionHeight : this.maxSectionHeight}
// initialOffsetY={800}
renderSection={section => {
return (
<View
style={{
flex: 1,
backgroundColor: section % 2 ? 'grey' : 'yellow',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Text>
I am section {section}
</Text>
</View>
);
}}
/>
);
}
renderItem(section, row) {
console.log("Rendering item... for "+row);
let color;
switch (row % 3) {
case 0:
color = 'red';
break;
case 1:
color = 'green';
break;
case 2:
color = 'blue';
break;
}
return (
<TouchableOpacity
tag={row}
style={{
flex: 1,
backgroundColor: color,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}
onPress={() => {
console.log('onPress', section, row);
}}
>
<Text style={{marginLeft: row % 3 * 50}}>
{'Section ' + section + ' Row ' + row}
</Text>
</TouchableOpacity>
);
}
renderFooter() {
return (
<View
style={{
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(99,99,99)'
}}
>
<Text>I am footer</Text>
</View>
);
}
renderHeader() {
return (
<View
style={{
height: 100,
backgroundColor: 'rgb(99,99,99)',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Text>I am header</Text>
</View>
);
}
}
export {LargeListSample};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.