React-Native 学习笔记十七（网络请求）

关于网络请求 不多说了 例子上面都有注释

/**
 * Created by zhangyanjiao on 16/10/20.
 */
import React,{Component} from 'react';
import {
    Image,
    View,
    StyleSheet,
    Text,
    ListView,
ToastAndroid
}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;
export default class NetDemo1 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请求数据  参数具体叫什么无所谓
                //获取数据  并将数据填充为数据源
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                    loaded: true
                });
            }).catch((error)=> {
                console.error(error);
            })
            .done()
    }

    render() {
        //如果数据加载完毕 渲染数据 否则显示加载框
        if (!this.state.loaded) {
            //显示加载框
            return this.renderLoadingView();
        }
        //渲染数据

        return (
            <View>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderMovie}//加()表示执行该函数 使用的是结果
                                                // 不加()表示 将函数名传入 然后由ListView内部的方法调用
                />
            </View>
        );
    }

    //数据没有加载完毕显示加载框
    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>"加载中..."</Text>
            </View>
        )
    }

    //数据显示的样式
    renderMovie(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>
        )
    }


}
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',
    }
});