FlatList使用示例：

先上代码，逐步细化

import React, { Component } from 'react'
import {RefreshControl, View, Text, FlatList, StyleSheet, Button } from 'react-native'

let data = [
    { key: 'sasasemDevin' },
    { key: 'Dan' },
    { key: 'Dominic' },
    { key: 'Jackson' },
    { key: 'James' },
    { key: 'Joel' },
    { key: 'John' },
    { key: 'Jillian' },
    { key: 'Jimmy' },
    { key: 'Julie' }
]
export default class App extends Component {

    constructor(props) {
        super(props)
        this.state = { data: data,refreshing:false }
        this.refreshing=false
    }
    _end = () => {
        let temp = this.state.data.splice(0)
        let content = Math.ceil(Math.random() * 100)
        temp.push({ key: content })
        this.setState({ data: temp })
    }
    _sep = () => {
        return <View style={{ height: 2, backgroundColor: 'blue' }}></View>
    }
    _del = item => {
        let temp = this.state.data.slice(0)
        let index = temp.findIndex(x => x.key == item.key)
        temp.splice(index, 1)
        this.setState({ data: temp})
    }
    _item = ({ item }) => {
        return (
            <View style={styles.container}>
                <Text>{item.key}</Text>
                <Button onPress={() => this._del(item)} title="delete"></Button>
            </View>
        )
    }
    render() {
        let i=0;
        return (
            <View style={styles.container}>
                <FlatList
                    keyExtractor={()=>++i}
                    data={this.state.data}
                    renderItem={this._item}
                    onEndReachedThreshold={0.2}
                    onEndReached={this._end}
                    ItemSeparatorComponent={this._sep}
                    refreshControl={
                        <RefreshControl
                            // 进度动画颜色，可以是多种颜色交替变化
                          colors={['#ff0000', '#00ff00', '#0000ff']}
                            // 进度的背景颜色
                          progressBackgroundColor={"yellow"}
                          //表示进度是否出现（未下拉时，为false）
                          refreshing={this.state.refreshing}
                          //下拉时的回调
                          onRefresh={() => {
                              //让进度出现
                            this.setState({refreshing:true})
                            //2秒之后，更新数据，同时让进度消失
                            setTimeout(()=>{
                                this.setState((prev,props)=>{
                                    prev.data.unshift({key:'johnyu'})
                                    prev.refreshing=false
                                    return prev
                                }) 
                            },2000)
                          }}
                        />
                      }
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        fontSize: 18,
        flex: 1,
        alignItems: 'center',
        justifyContent:'space-around',
        flexDirection: 'row',
        height:80
    },
    item: {
        
    },

})