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

来源：互联网发布：左轮吉他淘宝店怎么样编辑：程序博客网时间：2024/05/18 03:32
关于网络请求不多说了例子上面都有注释
/** * 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',    }});
0 0