React-Native ActivityIndicator-指示器

ActivityIndicator指示器

系统的指示器ActivityIndicator在Native中的使用方法.

默认的有四个属性: size, color, animating,hidesWhenStopped;
/**
* size: 是个枚举值: large , small 默认是small
* 在安卓里面的话可以设置大小类型为number的,只适用在安卓里面
* color: 默认是white
* animating:bool类型 默认是显示true 隐藏是false
* hidesWhenStopped: bool类型 在没有动画的时候是否隐藏 默认是true
* /

import React, { Component } from 'react';


import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
    NavigatorIOS,
    ActivityIndicator,
} from 'react-native';


export default class Helloworld extends Component {

    state: State;
    _timer: Timer;

    constructor(props){
        super(props);
        this.state = {
            animating: true,
        };
    }

    componentDidMount() {
        this.setToggleTimeout();
    }

    componentWillUnmount(){
        clearTimeout(this._timer);
    }

    setToggleTimeout(){
        this._timer = setTimeout(() => {
            this.setState({animating: !this.state.animating});
            this.setToggleTimeout();
        }, 2000);
    }

  render() {

    return (
    /**
     * 在render中调用NavigatorIOS组件，initialRoute是初始化路由，title是当前页面的头部标题；component是当前路由下显示的组件；
     */

      <ActivityIndicator
      animating={this.state.animating}
                /**
          * transform: scale 放大比例
          * backgroundColor:设置背景色
          */
                style={[styles.centering,{flex:1,backgroundColor:'gray',transform:[{scale:5}]}]}
          /**
          *  size: 是个枚举值: large , small 默认是small
          *  color: 默认是white
          *  animating:bool类型 默认是显示true 隐藏是false
          *  hidesWhenStopped: bool类型 在没有动画的时候是否隐藏 默认是true
          *  在安卓里面的话可以设置大小类型为number的,只适用在安卓里面:
          *  eg: {
                     platform: 'android',
                     title: 'Custom size (size: 75)',
                     render() {
                         return (
                               <ActivityIndicator
                                style={styles.centering}
                                size={75}
                                />
                              );
                       }
                },
          */
                size= 'large'
                color= 'red'
          />
    );
  }
}


const styles = StyleSheet.create({
    container:{
      flex:1,
    },
    centering:{
        alignItems:'center',
        justifyContent:'center',
        padding:8,
    },
    gray:{
      backgroundColor:'#cccccc',
    },
    horizontal:{
        flexDirection:'row',
        justifyContent:'space-around',
        padding:8,
    },
});

AppRegistry.registerComponent('Helloworld', () => Helloworld);

效果图:

设置背景色和放大后的效果: