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

前端之家收集整理的这篇文章主要介绍了React-Native进阶_2.加载指示动画 ActivityIndicator前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  1. 带动画的加载指示 android 使用 ActivityIndicator ios 使用 ActivityIndicatorIos
  2. size = 'large'
  3. color ='#6435c9'
  4. 设置大小和颜色
  5.  
  6. /**
  7. * Sample React Native App
  8. * https://github.com/facebook/react-native
  9. * @flow
  10. */
  11. 'use strict'
  12. import React,{Component} from 'react';
  13. import styles from '../Styles/Main';
  14. import {
  15. Text,Image,View,ListView,ActivityIndicator,} from 'react-native';
  16.  
  17. let REQUEST_URL = 'https://api.douban.com/v2/movie/top250';
  18. export default class Day0718 extends Component {
  19. constructor(props) {
  20. super(props);
  21. this.state = {
  22. dataSource:new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}),loaded: false,};
  23. }
  24. componentDidMount(){
  25. this._fetchData();
  26. }
  27. _fetchData(){
  28. fetch(REQUEST_URL)
  29. .then(response => response.json())
  30. .then(responseData =>{
  31. this.setState({
  32. movies:this.state.dataSource.cloneWithRows(responseData.subjects),// loaded: true,});
  33. })
  34. .done();
  35. }
  36. render() {
  37. if(!this.state.loaded){
  38. return this._renderLoadingView();
  39. }
  40. return (
  41. <View style={styles.Container}>
  42. <ListView
  43. dataSource={this.state.movies}
  44. renderRow={this._renderMovieList}
  45. style={styles.listView}
  46.  
  47. />
  48. </View>
  49. );
  50. }
  51. _renderMovieList(movie){
  52. return(
  53. <View style = {styles.item}>
  54. <View style = {styles.itemImage}>
  55. <Image
  56. style ={styles.image}
  57. source ={{uri:movie.images.large}}/>
  58. </View>
  59. <View style = {styles.itemContent}>
  60. <Text style ={styles.itemHeader}>{movie.title}</Text>
  61. <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text>
  62. <Text style ={styles.redText}>{movie.rating.average}</Text>
  63.  
  64. </View>
  65. </View>
  66. );
  67. };
  68. _renderLoadingView(){
  69. return (
  70. <View style ={styles.loading}>
  71. <ActivityIndicator
  72. size = 'large'
  73. color ='#6435c9'
  74. />
  75. </View>
  76. );
  77. };
  78.  
  79. }

效果图:

猜你在找的React相关文章