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