React Native(FlatList下拉刷新,上拉加载,2017-09-13)

多选.gif

1.头部/尾部
2.item项/item项分割线
3.滚动到某item项
4.是否隐藏水平,垂直滚动条
5.上啦加载(测试数据有点问题,比较难模拟),下拉刷新

import React, {Component, PropTypes} from 'react'
import {
    View,
    Dimensions,
    ListView,
    TextInput,
    Image,
    Text,
    FlatList,
    RefreshControl,
    TouchableOpacity,
} from 'react-native'

let {width, height} = Dimensions.get('window');


export default class TestListPage2 extends Component {

    //构造函数
    constructor(props) {
        super(props)

        this.state = {
            refreshing: false,
            isLoreMoreing: 'LoreMoreing',
            dataSource: [],

        }
        this.responseData = [];
    }


    componentDidMount() {
        // this.Refresh();
        //模拟请求后台返回的数据

    }


    Refresh = ()=> {

        this.setState({
            refreshing: true,
        });


        setTimeout(() => {
            //默认选中第二个
            this.responseData = [
                {id: 100}, {id: 101}, {id: 102}, {id: 103}, {id: 104}
            ]
            this.setState({
                refreshing: false,
                dataSource: this.responseData
            });
            this.isLoreMore = false;
        }, 2000);
    }

    isLoreMore = false;
    LoreMore = ()=> {

        if (this.isLoreMore == false) {
            this.setState({
                isLoreMoreing: 'LoreMoreing',
            });

            this.isLoreMore = true;
            this.responseData = this.responseData.concat({id: '加载的新数据'});
            setTimeout(() => {
                this.setState({
                    dataSource: this.responseData,
                })
            }, 500);

            setTimeout(() => {
                this.setState({
                    isLoreMoreing: 'LoreMoreEmpty'
                })
            }, 500);
        }
    }


    render() {
        return (
            
                
                    {'点击刷新     '}

                     {
                        this._flatList.scrollToIndex({viewPosition: 0, index: 4})
                    }}>{'点击滚动到第4个'}


                
                this._flatList = flatList}
                    ListHeaderComponent={this.renderHeader}//头部
                    ListFooterComponent={this.renderFooter}//尾巴
                    renderItem={this.renderRow}//每行显示一项
                    ItemSeparatorComponent={this.renderSeparator}//每行底部---一般写下划线
                    enableEmptySections={true}//数据可以为空
                    keyExtractor={(item, index)=>item.key = index}
                    onEndReachedThreshold={0.1}//执行上啦的时候10%执行
                    onEndReached={this.LoreMore}
                    data={this.state.dataSource}
                    refreshControl={
                        
                    }
                />
            
        );
    }


    renderRow = (item) => {
        let rowData = item.item;
        let index = rowData.key
        return (
            
                {rowData.id}
            
        )
    }

    renderSeparator = ()=> {
        return (
            
        )
    }


    renderHeader = ()=> {
        return (
            
                {'我是头部'}
            
        )
    }


    renderFooter = ()=> {

        if (this.state.dataSource.length != 0 && this.state.isLoreMoreing == 'LoreMoreing') {
            return (
                
                    {'正在加载....'}
                
            )
        } else if (this.state.isLoreMoreing == 'LoreMoreEmpty') {
            return (
                
                    {'暂无更多'}
                
            )
        } else {
            return null
        }

    }


}