import React, {Component} from ‘react’;
import {
Platform,
StyleSheet,
View,
Image,
Text,
FlatList,
Button,
} from ‘react-native’;
export default class App extends Component {
_flatList;
_header = ()=>{
return(
<Text style={styles.headerStyle}>
头部
</Text>
);
}
_footer = ()=>{
return(
<Text style={styles.headerStyle}>
尾部
</Text>
);
}
_itemSeparator(){
return(
<View style={{height:1, backgroundColor:'orange'}}></View>
);
}
_renderItem = (item)=>{
var text = 'key = ' + item.index + 'title = ' + item.item.title;
return(
<View style={{height:100, backgroundColor:'red', justifyContent:'center', alignItems:'center'}}>
<Text>
{text}
</Text>
</View>
);
}
render() {
var data = [];
for (var i = 0; i < 100; i++){
data.push(
{key:i,title:i}
);
}
return (
<View style={styles.container}>
<Button
title='返回指定位置'
onPress={()=>{
this._flatList.scrollToEnd()
}}>
</Button>
<FlatList
ref={(flatList)=>{this._flatList = flatList}}
ListHeaderComponent={this._header}
ListFooterComponent={this._footer}
ItemSeparatorComponent={()=>this._itemSeparator()}
renderItem={this._renderItem}
data={data}
>
</FlatList>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:‘gray’,
},
headerStyle:{
textAlign:‘center’,
// textAlignVertical:‘center’,
fontSize:30,
color:‘white’,
},
});