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

来源：互联网发布：mysql from not in 编辑：程序博客网时间：2024/06/16 16:42
完整讲解链接
使用三方封装的插件完成 listView的下啦刷新并添加网络请求
执行 npm install react-native-pull --save
上代码
/** * 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',    }});
0 0