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 (
<View style={styles.Container}>
<ListView
dataSource={this.state.movies}
renderRow={this._renderMovieList}
style={styles.listView}

/>
</View>
);
}
_renderMovieList(movie){
return(
<View style = {styles.item}>
<View style = {styles.itemImage}>
<Image
style ={styles.image}
source ={{uri:movie.images.large}}/>
</View>
<View style = {styles.itemContent}>
<Text style ={styles.itemHeader}>{movie.title}</Text>
<Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text>
<Text style ={styles.redText}>{movie.rating.average}</Text>

</View>
</View>
);
};
_renderLoadingView(){
return (
<View style ={styles.loading}>
<ActivityIndicator
size = 'large'
color ='#6435c9'
/>
</View>
);
};

}

效果图：