FlatList组件

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’,
},
});