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

来源：互联网发布：arp ip 对应mac地址编辑：程序博客网时间：2024/06/11 01:40

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

效果图：

阅读全文

0 0