React Native网络之Fetch

import React, {Component} from 'react';
import {
    AppRegistry,
    Text,
    View,
    FlatList,
    ActivityIndicator
} from 'react-native';

export default class HelloWorld extends Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true}
    }

    componentDidMount(){
        return fetch('http://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies,
                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }
    
    render(){

        if(this.state.isLoading){
            return(
                <View style={{flex: 1, padding: 20}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        return(
            <View style={{flex: 1, paddingTop:20}}>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
                    keyExtractor={(item, index) => item.id}
                />
            </View>
        );
    }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

猜你喜欢

转载自blog.csdn.net/u014005316/article/details/85618144