[React Native]看著文件跌跌撞撞-Networking

import React from 'react';
import axios from 'axios';
import { StyleSheet, Text, View, Button, TextInput, Alert, ScrollView, Image , FlatList , SectionList , ActivityIndicator } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      api : 'https://facebook.github.io/react-native/movies.json',
      isLoading : true,
      dataSource: []
    }  
  }
  fetchData() {
    return axios(this.state.api).then(rs => {
      let setObj = {
        isLoading : false,
        dataSource : rs.data.movies
      }
      this.setState(setObj);
    }).catch(error => console.log(error));
  }

  componentDidMount() {
    return this.fetchData();
  }
  
  render() {
    if(this.state.isLoading){
      return (
        <View style={styles.container}>
          <ActivityIndicator></ActivityIndicator>
        </View>
      )
    }

    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={
            ({item})=> <Text style={styles.li}>{ item.title }</Text>
          }
          keyExtractor={ (item,index)=>index.toString() }
        ></FlatList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 25,
  },
  li: {
    backgroundColor: '#f00',
    padding: 10,
    marginBottom: 2,
  }
});