React Native ListView上拉刷新，下拉加载刷新，并添加网络无数据时的缺省图

来源：互联网发布：excel生成数据透视表编辑：程序博客网时间：2024/05/01 22:58

import React, { Component } from 'react';import {    StyleSheet,    View,    Dimensions,    ListView,    TouchableOpacity,    Text,    RefreshControl} from 'react-native';const { width, height } = Dimensions.get('window');//模块声名并导出export default class CommonListView extends Component {    //属性声名    static STATE_INIT = -1;    static STATE_HAS_MORE = 0;    static STATE_LOADING_MORE = 1;    static STATE_NO_MORE = 2;    static STATE_REFRESH = 3;    static propTypes = {        wrapStyle: React.PropTypes.any,        contentContainerStyle: React.PropTypes.any,        dataSource: React.PropTypes.any,        renderRow: React.PropTypes.func,        onLoadMore: React.PropTypes.func,        onRefresh: React.PropTypes.func,        renderSeparator: React.PropTypes.func,        listViewRef: React.PropTypes.func,        listState: React.PropTypes.number, // (-1初始状态,0.还有更多 1.加载更多中, 2.没有更多, 3.下拉刷新 )        enableLoadMore: React.PropTypes.bool,        enableRefresh: React.PropTypes.bool,    };    //默认属性    static defaultProps = {        listState: -1,        enableRefresh: true,    };    //构造函数    constructor(props) {        super(props);        this.listView = null;        this.state = { //状态机变量声明        }    }    /**     * parms ={x: 0, y: 0, animated: true}     */    scrollTo(parms = { x: 0, y: 500, animated: true }) {        this.listView && this.listView.scrollTo && this.listView.scrollTo(parms);    }    setRef(listView){        this.listView = listView;        this.props.listViewRef&&this.props.listViewRef(listView);    }    //渲染    render() {        return (            <View style={[{ flex: 1 },this.props.wrapStyle]}>                {this.props.dataSource && this.props.dataSource.getRowCount() == 0 ? <View                    style={{ position: 'absolute', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF00' }}>                    {                        this.props.children                    }                </View> : null}                <ListView                    ref={(listView) => { this.setRef(listView)}}                    {...this.props}                    contentContainerStyle={this.props.contentContainerStyle}                    dataSource={this.props.dataSource}                    renderRow={this.props.renderRow}                    enableEmptySections={true}                    removeClippedSubviews={false}                    onEndReachedThreshold={5}                    renderSeparator={this.props.renderSeparator}                    initialListSize={10}                    onEndReached={this.props.enableLoadMore && this.props.listState == CommonListView.STATE_HAS_MORE ? this.props.onLoadMore : null}                    renderFooter={this.props.renderFooter || this.renderFooter}                    refreshControl={                        this.props.enableRefresh ?                            <RefreshControl                                refreshing={this.props.listState == CommonListView.STATE_REFRESH}                                onRefresh={this.props.onRefresh}                                tintColor="#FA3D4F"                                title="用力加载..."                                progressBackgroundColor="#FA3D4F"                                colors={['white']}                            /> : null                    }                />            </View>        )    }    renderFooter = () => {        if (this.props.listState == CommonListView.STATE_NO_MORE) return (            <View                style={{ alignItems: 'center', padding: 5, backgroundColor: '#FFFFFF00', height: 30, width: '100%', marginTop: 10 }}>                <Text style={{ color: '#ccc', backgroundColor: '#FFFFFF00', fontSize: 12 }}>                    没更多数据                </Text>            </View>);        if (!this.props.enableLoadMore) {            return (<View />)        }        return (            <TouchableOpacity                style={{ alignItems: 'center', padding: 5, backgroundColor: '#F4F4F400', height: 30, width: '100%', marginTop: 10 }}                onPress={() => {                    if (this.props.listState == CommonListView.STATE_HAS_MORE) {                        this.props.onLoadMore()                    }                }}            >                <Text style={{ color: '#ccc', backgroundColor: '#FFFFFF00', fontSize: 12 }}>                    {this.props.listState === CommonListView.STATE_LOADING_MORE ? '加载更多中' : '上拉加载更多'}                </Text>            </TouchableOpacity>        )    }};

外界使用

import React, {Component} from 'react';import {    StyleSheet,    View,    Dimensions,    TouchableOpacity,    ListView,    Image,    Text} from 'react-native';const {width, height} = Dimensions.get('window');export default class MyPoints extends React.Component {    static propTypes = {};    static defaultProps = {};    constructor(props) {        super(props);        let ds = new ListView.DataSource({            rowHasChanged: (r1, r2) => (r1, r2) => {                return r1 !== r2;            }        });        this.state = {            dataSource: ds.cloneWithRows([]),            enableLoadMore: false,            listState: CommonListView.STATE_INIT,            dataArray: [],            pageNum: 1,        };    }    componentWillMount() {        this.onRefresh()    }    onRefresh = () => { // 下拉刷新        this.setState({            listState: CommonListView.STATE_REFRESH        }, () => {            this.loadListData(false)        });    };    onLoadMore = () => {        this.loadListData(true)    };    loadListData(loadMore = false) {        Api.menberGrowthValueList({            pageNum: !loadMore ? 1 : this.state.pageNum + 1,            pointType: 2,            pageSize: 10        }).then(json => {            let dataSource = this.state.dataSource;            let hasMore = json.data.pages > json.data.pageNum;            let oldArray = this.state.dataArray;            let newArray = [];            if (loadMore) {                newArray = oldArray.concat(json.data.list)            } else {                newArray = json.data.list;            }            if (json.data.list == null) {                this.setState({                    dataSource: dataSource.cloneWithRows([]),                    listState: 5// 不显示  没有更多  的文字                }, () => {                })            } else {                this.setState({                    consumePoint: json.data.consumePoint ? json.data.consumePoint : 0,                    listTotal: json.data.total,                    list: json.data.list,                    dataSource: dataSource.cloneWithRows(newArray),                    dataArray: newArray,                    enableLoadMore: hasMore,                    pageNum: json.data.pageNum,                    listState: hasMore ? CommonListView.STATE_HAS_MORE : newArray.length == 0 ? CommonListView.STATE_INIT : CommonListView.STATE_NO_MORE                }, () => {                })            }        }).catch(err => {        })    }    render() {        return (          {this.renderListView()}        );    }    renderListView = () => {        return (            <CommonListView                renderRow={this.renderRow}                dataSource={this.state.dataSource}                listState={this.state.listState}                onRefresh={this.onRefresh}                onLoadMore={this.onLoadMore}                enableRefresh={true}                enableLoadMore={this.state.enableLoadMore}                style={{ flex: 1, }}            >                <View                    style={{ width: width, height: '100%', alignItems: 'center', justifyContent: 'center', }}                >                    <Image                        style={{ width: Constant.scale(92), height: Constant.scale(77), marginTop: Constant.scale(0) }}                        source={require('../img/mine/ic_collection_nodata.png')}                    />                    <Text style={{ fontSize: 16, color: Constant.colorTxtContent, marginTop: Constant.scale(25) }}>                        暂无数据                    </Text>                </View>            </CommonListView>        )    }    renderRow = (rowData, sectionID, rowID) => {        return (            <View style={{width: width, height: Constant.scale(54), backgroundColor:'#FFF'}}>                <View style={{width: width, height: Constant.scale(53.5), backgroundColor:'#FFF',                flexDirection:"row", alignItems:"center", justifyContent:'space-between'}}>                    <View style={{width:"80%", height:'100%', justifyContent:'center'}}>                        <Text                            style={{color:Constant.colorTxtContent, fontSize:14, marginLeft:Constant.sizeMarginDefault}}>{rowData.description}</Text>                        <Text                            style={{color:"rgb(181,181,181)", fontSize:12, marginLeft:Constant.sizeMarginDefault, marginTop:Constant.scale(2)}}>                            {rowData.createTime}</Text>                    </View>                    <View style={{width:'20%',height:'100%', justifyContent:'center'}}>                        <Text                            style={{textAlign:'right',marginRight:Constant.scale(15), color:rowData.changeValue > 0 ? "rgb(125,184,115)" : Constant.colorPrimary}}>{rowData.changeValue > 0 ? "+" + rowData.changeValue : rowData.changeValue}</Text>                    </View>                </View>                <View style={{width: width - Constant.scale(20),                 marginLeft:Constant.scale(10), height: 0.5, backgroundColor:Constant.colorDivider }}>                </View>            </View>        )    }};

阅读全文

0 0