React Native之网络

---

React Native提供了Fetch API,用于满足开发者访问网络的需求。
示例代码：

import React, {Component} from 'react'

import {
    Text,
    View,
    ActivityIndicator,
    FlatList,

} from 'react-native'


export default class FetchExample extends Component {
    static navigationOptions = {
        title: '网络请求',
    };

    constructor(props){
        super(props);
        this.state = {isLoading:true};
        this.compenentDidMount();
    }
    compenentDidMount(){
        return fetch('https://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,padding: 20}}>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={({item}) => <Text>{item.title},{item.releaseYear}</Text>}
                    keyExtractor={(item,index) => item.id} />

            </View>
        );
    }
}

效果图：

网络