React-Native进阶_2.加载指示动画 ActivityIndicator

在安卓原始 App中使用的加载框 ProgressBar 在React -Native 中也是有相对应的视图，叫做ActivityIndicator,对应ios 中React-Native 提供的是 ActivityIndicatorIos 

带动画的加载指示 android 使用 ActivityIndicator ios 使用 ActivityIndicatorIos
  size = 'large'
  color ='#6435c9'
  设置大小和颜色

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict'
import React, {Component} from 'react';
import styles from '../Styles/Main';
import {
    Text,
    Image,
    View,
    ListView,
ActivityIndicator,
} from 'react-native';

let REQUEST_URL = 'https://api.douban.com/v2/movie/top250';
export default class Day0718 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())
            .then(responseData =>{
                this.setState({
                    movies:this.state.dataSource.cloneWithRows(responseData.subjects),
                   // loaded: true,
                });
            })
            .done();
    }
    render() {
        if(!this.state.loaded){
            return this._renderLoadingView();
        }
        return (
            
                
            
        );
    }
    _renderMovieList(movie){
        return(
            
                
                    
                
                
                    {movie.title}
                    {movie.original_title}({movie.year})
                    {movie.rating.average}

                
            
        );
    };
    _renderLoadingView(){
        return (
            
                
            
        );
    };

}

效果图：