React Native 学习笔记二十（关于ListView的使用）

完整讲解链接

使用三方封装的插件 完成 listView的下啦刷新  并添加网络请求 

1. 执行 npm install react-native-pull --save
2. 上代码

/**
 * Created by zhangyanjiao on 16/10/21.
 */
import React, {Component} from 'react';
import {
    PullList
} from 'react-native-pull';
import {
    StyleSheet,
    ListView,
    ActivityIndicator,
    View,
    Text,
    Image
}from 'react-native';
//设置访问的网址
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;
const moreText = "加载完毕";    //foot显示的文案
//页码
var pageNum = 1;
//每页显示数据的条数
const pageSize = 10;
//页面总数据数
var pageCount = 0;
//页面List总数据
var totalList = new Array();
var totalNum=0;

//foot：  0 隐藏  1  已加载完成   2  显示加载中
export default class ListViewDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource : new ListView.DataSource({rowHasChanged: (r1, r2)=>r1 != r2}),
            loaded: false,
        };
    }
    //使用该方法进行网络请求的加载
    componentDidMount() {
        //调用加载网络数据的方法
        this.fetchData();
    }

    //从网络加载数据
    fetchData() {
        fetch(REQUEST_URL) //发送网络请求
            .then((response)=>response.json())//获取网络请求的json数据
            .then((responseData)=> { //处理获取的json请求数据  参数具体叫什么无所谓
                let data=responseData.movies;
                if (data==null){
                    this.setState({error:true,loaded:true});
                }
                else {
                    let count = responseData.total;
//遍历的时候没有 设置初始值  坑死自己了  对自己说一句 大爷您辛苦啦
                    for (let i = 0; i < 10; i++) {
                        totalList.push(data[i]);
                    }
                    //totalList.push(data);
                    //alert(totalList);
                    //获取数据  并将数据填充为数据源
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(totalList),
                        loaded: true,
                        error:false
                    });
                    //console.error(responseData);
                }
            }).catch((error)=> {
                //console.error(error);
            })
            .done()
    }


    onPullRelease(resolve) {
        //do something
        setTimeout(() => {
            resolve();
        }, 3000);
    }

    topIndicatorRender(pulling, pullok, pullrelease) {
        return <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
            <ActivityIndicator size="small" color="gray" />
            {pulling ? <Text>当前PullList状态: pulling...</Text> : null}
            {pullok ? <Text>当前PullList状态: pullok......</Text> : null}
            {pullrelease ? <Text>当前PullList状态: pullrelease......</Text> : null}
        </View>;
    }

    render() {
        return (
            <View style={styles.container}>
                <PullList
                    style={{}}
                    onPullRelease={this.onPullRelease} topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60}
                    renderHeader={this.renderHeader.bind(this)}
                    dataSource={this.state.dataSource}
                    pageSize={5}
                    initialListSize={5}
                    renderRow={this.renderRow.bind(this)}
                    onEndReached={this.loadMore.bind(this)}
                    onEndReachedThreshold={60}
                    renderFooter={this.renderFooter.bind(this)}
                />
            </View>
        );
    }

    renderHeader() {
        return (
            <View style={{height: 50, backgroundColor: '#eeeeee', alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{fontWeight: 'bold'}}>This is header</Text>
            </View>
        );
    }

    //数据显示的样式
    renderRow(movie) {
        return (
            <View style={styles.container}>
                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>
            </View>
        )
    }

    renderFooter() {
        if(this.state.nomore) {
            return (
                <View style={{height:40,alignItems:'center',justifyContent:'flex-start',}}>
                <Text style={{color:'#999999',fontSize:12,marginTop:10}}>
                    {moreText}
                </Text>
            </View>);
        }
        return (
            <View style={{height: 100}}>
                <ActivityIndicator />
            </View>
        );
    }

    loadMore() {
        this.fetchData();
    }

}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center',
    },
    year: {
        textAlign: 'center',
    },
    thumbnail: {
        width: 53,
        height: 81,
    },
    listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
    }
});