多選.gif

1.頭部/尾部
2.item項(xiàng)/item項(xiàng)分割線
3.滾動(dòng)到某item項(xiàng)
4.是否隱藏水平,垂直滾動(dòng)條
5.上啦加載(測試數(shù)據(jù)有點(diǎn)問題,比較難模擬),下拉刷新

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 {

    //構(gòu)造函數(shù)
    constructor(props) {
        super(props)

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

        }
        this.responseData = [];
    }


    componentDidMount() {
        // this.Refresh();
        //模擬請求后臺(tái)返回的數(shù)據(jù)

    }


    Refresh = ()=> {

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


        setTimeout(() => {
            //默認(rèn)選中第二個(gè)
            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: '加載的新數(shù)據(jù)'});
            setTimeout(() => {
                this.setState({
                    dataSource: this.responseData,
                })
            }, 500);

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


    render() {
        return (
            <View style={{flex: 1}}>
                <View style={{
                    marginTop: 20,
                    height: 44,
                    width: width,
                    justifyContent: 'center',
                    backgroundColor: 'gray',
                    alignItems: 'center',
                    flexDirection: 'row'
                }}>
                    <Text onPress={this.Refresh}>{'點(diǎn)擊刷新     '}</Text>

                    <Text onPress={()=> {
                        this._flatList.scrollToIndex({viewPosition: 0, index: 4})
                    }}>{'點(diǎn)擊滾動(dòng)到第4個(gè)'}</Text>


                </View>
                <FlatList
                    showsVerticalScrollIndicator={false}//是否顯示垂直滾動(dòng)條
                    showsHorizontalScrollIndicator={false}//是否顯示水平滾動(dòng)條
                    numColumns={1}//每行顯示1個(gè)
                    ref={(flatList)=>this._flatList = flatList}
                    ListHeaderComponent={this.renderHeader}//頭部
                    ListFooterComponent={this.renderFooter}//尾巴
                    renderItem={this.renderRow}//每行顯示一項(xiàng)
                    ItemSeparatorComponent={this.renderSeparator}//每行底部---一般寫下劃線
                    enableEmptySections={true}//數(shù)據(jù)可以為空
                    keyExtractor={(item, index)=>item.key = index}
                    onEndReachedThreshold={0.1}//執(zhí)行上啦的時(shí)候10%執(zhí)行
                    onEndReached={this.LoreMore}
                    data={this.state.dataSource}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.Refresh}
                            title="Loading..."/>
                    }
                />
            </View>
        );
    }


    renderRow = (item) => {
        let rowData = item.item;
        let index = rowData.key
        return (
            <View style={{height: 150, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
                <Text>{rowData.id}</Text>
            </View>
        )
    }

    renderSeparator = ()=> {
        return (
            <View style={{height: 1, backgroundColor: 'rgb(200,200,200)',}}/>
        )
    }


    renderHeader = ()=> {
        return (
            <View style={{
                height: 44,
                width: width,
                justifyContent: 'center',
                backgroundColor: 'red',
                alignItems: 'center'
            }} activeOpacity={1}>
                <Text>{'我是頭部'}</Text>
            </View>
        )
    }


    renderFooter = ()=> {

        if (this.state.dataSource.length != 0 && this.state.isLoreMoreing == 'LoreMoreing') {
            return (
                <View style={{
                    height: 44,
                    backgroundColor: 'rgb(200,200,200)',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Text>{'正在加載....'}</Text>
                </View>
            )
        } else if (this.state.isLoreMoreing == 'LoreMoreEmpty') {
            return (
                <View style={{
                    height: 44,
                    backgroundColor: 'rgb(200,200,200)',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Text>{'暫無更多'}</Text>
                </View>
            )
        } else {
            return null
        }

    }


}