React Native - ActivityIndicator 组件

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

默认的有四个属性: size, color, animating,hidesWhenStopped; 
size: 是个枚举值: large,small 指示器大小,默认是small 
在安卓里面的话可以设置大小类型为number的,只适用在安卓里面 
color: 指示器圆圈的前景色,默认灰色
animating:是否要显示这个加载指示器,默认true是显示，false隐藏
hidesWhenStopped: ios独有,当没有加载动画的时候是否隐藏,默认是true 

效果图：

Snip20161212_6.png

代码：

import React, { Component } from 'react';
import {  StyleSheet,  ActivityIndicator,  Text,  View} from 'react-native';
const styles = StyleSheet.create({  
  container: {    
    flex: 1,    
    flexDirection: 'row',    
    alignItems: 'center',    
    justifyContent: 'center'  
  },  
  centering: {    
    padding: 8  
  }, 
  textStyle: {    
    fontSize: 20  
  }
});

class SLActivityIndicator extends Component {  
  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 (      
           
           

  eg: { 
    platform: 'android', 
    title: 'Custom size (size: 75)', 
    render() { 
      return ( 
         
      ); 
    } 
  },   
        正在加载中...
         
    );  
  }
}

export default SLActivityIndicator;