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 (      
      <View style={styles.container}>     
        <ActivityIndicator          
          animating={this.state.animating} 
          // transform: scale 放大比例         
          style={[styles.centering, { height: 80, transform: [{ scale: 5 }]  }]} 
          size="large"        
        />   

  eg: { 
    platform: 'android', 
    title: 'Custom size (size: 75)', 
    render() { 
      return ( 
        <ActivityIndicator 
        style={styles.centering} 
        size={75} 
        /> 
      ); 
    } 
  },   
        <Text style={styles.textStyle}>正在加载中...</Text>
      </View>   
    );  
  }
}

export default SLActivityIndicator;