campus_react_local/App/utils/RefreshInfiniteListView.js

/**
 * Created by zhanlong on 2016/11/29.
 */
'use strict';
import React, {PureComponent} from "react";
import {FlatList, Text, View, Animated, DeviceEventEmitter, StyleSheet} from "react-native";
import PropTypes from "prop-types";
import ScreenDimensions from './ScreenDimensions'
import NavigationBarHeight from './NavigationBarHeight'
import TabBarHeight from './TabBarHeight'


const TEXT_LIGTH_GRAY_COLOR = '#677b93';//字体灰色
const COLOR_WHITE_GREY = "#F1F1F1";
const COLOR_MIDDLE_GREY = "#888888";
const TABBAR_HEIGHT = 49;
const FONT_SIZE_SUBTITLE = 12;



const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

const viewHeight = ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height - 18;
export default class RefreshInfiniteListView extends PureComponent {
    static propTypes = {
        ...FlatList.propTypes,
        data: PropTypes.array.isRequired,
        itemHeight: PropTypes.number,
        initialNumToRender: PropTypes.number,
        renderEmptyData: PropTypes.func,
        onScroll: PropTypes.func.isRequired,


    };
    static defaultProps = {
        data: [],
        scrollEnabled: true,
        itemHeight: 40,
        initialNumToRender: 10,
        horizontal:false,
        pagingEnabled:false,
        showsHorizontalScrollIndicator:true,
        renderEmptyData: ()=> {
            return (
                <View
                    style={styles.NoDataStyle}>
                   <Text>没有数据</Text>
                </View>
            );
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            ...FlatList.defaultProps,
            scrollEnabled: this.props.scrollEnabled,
            data: this.props.data,
            refreshing: false
        };
        this.rowRefs = [];
    }

    render() {
        var styleArr = [{flex: 1}];
        if (this.props.style)styleArr.push(this.props.style);
        return (
            <FlatList
                ref={this.listRef.bind(this)}
                refreshing={this.state.refreshing}
                onEndReachedThreshold={0.1}
                style={styleArr}
                showsHorizontalScrollIndicator = {this.props.showsHorizontalScrollIndicator}                
                pagingEnabled={this.props.pagingEnabled}
                numColumns ={this.props.numColumns}
                horizontal ={this.props.horizontal}
                data={this.state.data}
                onScroll={this.onScroll.bind(this)}
                initialNumToRender={this.props.initialNumToRender}
                getItemLayout={this._getItemLayout.bind(this)}
                renderItem={ this._renderItem.bind(this)}
                ListHeaderComponent={this._listHeaderComponent.bind(this)}
                onRefresh={this.props.onRefresh?this._onRefresh.bind(this):undefined}
                onEndReached={this.props.onEndReached?this._onEndReached.bind(this):undefined}
                scrollToIndex={this.scrollToIndex.bind(this)}
            />
        );
    }
    onScroll(event){
        if (this.props.hasOwnProperty("onScroll") && this.props.onScroll != null) {
            this.props.onScroll(event.nativeEvent.contentOffset.x)
        }
    
    }
    _renderItem(data) {
        return this.props.renderItem(data.item, data.index);
    }

    scrollToIndex(params) {
        return {animated: params.animated, index: params.index};
    }

    _listHeaderComponent() {
        if (this.state.data.length > 0) {
            return null;
        } else {
            return this.props.renderEmptyData();
        }
    }

    _getItemLayout(data, index) {
        return {length: this.props.itemHeight, offset: this.props.itemHeight * index, index};
    }

    _onRefresh() {
        if (this.props.hasOwnProperty("onRefresh") && this.props.onRefresh != null) {
            this.props.onRefresh();
        }
    }

    _onEndReached(info) {
        if (this.props.hasOwnProperty("onEndReached") && this.props.onEndReached != null) {
            this.props.onEndReached();
        }
    }


    listRef(list) {
        this.list = list;
    }

    setRefreshing(value) {
        this.setState({
            refreshing: value
        });
    }

    setProps(props) {
        this.setState(props);
    }

    setData(data) {
        var formatedData = [];
        data.forEach((item, index)=> {
            item.key = String("index" + index);
            formatedData[index] = item;
        })
        this.setState({
            refreshing: false,
            data: formatedData
        });
    }

    getData() {
        return this.state.data;
    }
}
const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height - 18,
		marginTop: NavigationBarHeight.height
    },
    NoDataStyle:{
        height:viewHeight*2/3,
        width: ScreenDimensions.width,
        alignItems:'center',
        justifyContent:'center'
    }

})