React Native網路之Fetch
阿新 • • 發佈:2019-01-03
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);