react-native-listview/lib/listview.js

listview是react native中上拉翻页插件

/**
 * Created by slowsay on 16/7/18.
 */
'use sturct';
import React,{Component} from 'react';
import {View,Text,StyleSheet,ScrollView,Animated,ListView,TouchableOpacity,RefreshControl,ActivityIndicator} from 'react-native';
import Loadimage from 'react-native-loadimage';
/**
 *@decsription 组件
 */
import Util from './core/utils';

export default class extends Component {
    constructor() {
        super();
        this.state = {
            animatetxt: '显示下一页',
            animateAlpha: 0,
            isLoadAlpha: 0,
            animating: false,
            isLoading: false,
            refreshtxt: '下拉刷新',
            cuti: 0,
            isrefresh: false,
            list: [],
            data: [],
            ds: new ListView.DataSource({
                rowHasChanged: (r1, r2)=>r1 !== r2,
            }).cloneWithRows([])
        }
    }

    componentDidMount() {
        this._onRefresh();
    }

    _touchonPress(id) {
        const {component,navigator}=this.props;
        navigator.push({
            name: '资讯详细页',
            component: component,
            params: {
                index: id,
                data: this.state.list
            }
        });
    }

    /**
     *@description 首页=>向下接后,获取数据
     */
    _onRefresh() {
        Util.nslog('----------load data----------');
        const {url,kind}=this.props;
        this.setState({isrefresh: true, isLoadAlpha: 0, refreshtxt: '正在刷新'});
        Util.fetch(url + '?' + Math.random(), {
            method: 'GET', headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        }, (e)=> {
            this.setState({
                cuti: 0,
                animateAlpha: 1,
                isLoadAlpha: 1,
                list: JSON.parse(e).data,
                data: [],
                isrefresh: false,
                refreshtxt: '下拉刷新'
            });
            this._dataUpdate(0);
        })
    }

    /**
     *@decription 翻页
     * @params {number} id
     */
    _dataUpdate(id) {
        const {pagesize}=this.props;
        this.setState({cuti: id});
        let _list = this.state.list, _ps = pagesize;
        let _len = Math.ceil(_list.length / _ps);
        let _pagesize = id < _len ? _ps : _list.length % _ps;
        let _arr = this.state.list.slice(id * _ps, id * _ps + _pagesize);
        let data = this.state.data.concat(_arr);
        this.setState({
            data: data,
            ds: this.state.ds.cloneWithRows(data)
        })
    }


    /**
     *@description 输出列表
     * @method listmap
     * @params {object} data 数据源
     * @params {number} sid 标题索引id
     * @params {number} id 索引id
     */
    _listMap(e, sid, id) {
        const {kind,styles}=this.props;
        const fadeAnim = new Animated.Value(0);
        Animated.timing(fadeAnim, {toValue: 1}).start();
        switch (kind || 0) {
            case 0:
                return (<TouchableOpacity onPress={()=>this._touchonPress(id)} key={id}>
                    <Animated.View style={[styles.list,{opacity:fadeAnim}]}>
                        <Loadimage style={styles.pic} url={e.src}/>
                        <Text style={styles.title}>{e.title}</Text>
                    </Animated.View>
                </TouchableOpacity>);
                break;
            case 1:
                return (<TouchableOpacity key={id} onPress={()=>this._touchonPress(id)}>
                    <Animated.View style={[styles.list,{opacity:fadeAnim}]}>
                        <Text style={styles.title}>{e.title}</Text>
                        <View>
                            <Loadimage style={styles.pic} url={e.src}/>
                            <Text style={styles.des}>{e.des}</Text>
                        </View>
                    </Animated.View>
                </TouchableOpacity>)
                break;
            case 2:
                return (<TouchableOpacity onPress={()=>this._touchonPress(id)} key={id}>
                    <Animated.View style={[styles.list,{opacity:fadeAnim}]}>
                        <Loadimage style={styles.pic} url={e.coverForFeed||''}/>
                        <Text style={styles.title}>{e.title || ''}</Text>
                    </Animated.View>
                </TouchableOpacity>)
                break;
        }
    }

    /**
     *@description 上拉滑动
     * @method onEndReached
     */
    _onEndReached() {
        this.setState({isLoading: true});
        if (this.state.isLoading) {
            return;
        }
        const {pagesize}=this.props;
        let _len = Math.ceil(this.state.list.length / pagesize) || pagesize;
        let _cuti = this.state.cuti;
        if (_cuti < _len - 1) {
            _cuti++;
            this.setState({animatetxt: '正在下载'})
            this._dataUpdate(_cuti);
        }
        else {
            this.setState({animatetxt: '没有了!', animateAlpha: 0})
        }
        this.setState({isLoading: false});


    }

    /**
     *@description 上拉提示标题
     */
    _renderFooter() {
        return (
            <View style={[liststyle.loading,{opacity:this.state.isLoadAlpha}]}>
                <ActivityIndicator style={{opacity:this.state.animateAlpha}}/>
                <Text>{this.state.animatetxt}</Text>
            </View>
        )
    }

    /**
     *@description removeClippedSubviews 此方法解决 报bug
     */
    render() {
        const {pagesize,onEndReachedThreshold}=this.props;
        return (
            <ListView
                refreshControl={<RefreshControl refreshing={this.state.isrefresh} title={this.state.refreshtxt}
                                onRefresh={()=>this._onRefresh()}/>}
                automaticallyAdjustContentInsets={false}
                renderRow={(e,sid,id)=>this._listMap(e,sid,id)}
                onEndReached={()=>this._onEndReached()}
                renderFooter={()=>this._renderFooter()}
                onEndReachedThreshold={onEndReachedThreshold||0}
                pageSize={pagesize}
                initialListSize={pagesize}
                enableEmptySections={true} dataSource={this.state.ds}/>
        );
    }
}
const liststyle = StyleSheet.create({
    loading: {
        flexDirection: 'row', alignItems: 'center', alignSelf: 'center'
    }
})