在安卓原始 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>
- );
- };
- }
效果图: