React Native从零开始（十）ActivityIndicator的使用

React Native从零开始（十）ActivityIndicator的使用

ActivityIndicator就是我们常见的Loading提示符号，实现起来也很简单，基本的属性也不多。废话不说先来一张效果图

一、基本属性

animating bool #：是否显示指示器（true、false）默认为true。

color string ：滚轮的前景颜色（默认为灰色）。

size enum('small', 'large') #：这个是上图中效果的实现，small和large分别为20和36的大小。

还有一个是ios的属性因为是Android的开发所以没有尝试，大家可以自己尝试下

hidesWhenStopped bool ：在没有动画的时候，是否要隐藏指示器（默认为true）。

二、实现的代码

1、首先是布局的介绍

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.demoTest}>
          点击会显示或隐藏Loading提示符号
        </Text>
        <ActivityIndicator
            animating={this.state.animating}
            size={'small'}/>
          <ActivityIndicator
              animating={this.state.animating}
              size={'large'}/>
          <Button
              onPress={ClickBtn.bind(this)}
              title="显示/隐藏"
              color="#841584"
          />
      </View>
    );
  }

没有什么好说的就是跟普通的使用是一样的，要先导入再使用。里头的Button是作为点击按钮

2、逻辑

第一步是设置state，需要用到animating，将其设置成true，这个属性在点击按钮的时候进行切换。

constructor(props){
      super(props);
      /*用来指示是否显示Loading提示符号*/
      this.state = {
          animating: true,
      }
  }

然后是按钮的逻辑，就是每次点击的时候判断是否为true，用三目运算符就好拉

function ClickBtn() {
    this.setState({
        animating: this.state.animating ? false : true
    });
}

三、整体的实现代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  Button
} from 'react-native';
function ClickBtn() {
    this.setState({
        animating: this.state.animating ? false : true
    });
}
export default class ActivityIndicatorDemo extends Component {
  constructor(props){
      super(props);
      /*用来指示是否显示Loading提示符号*/
      this.state = {
          animating: true,
      }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.demoTest}>
          点击会显示或隐藏Loading提示符号
        </Text>
        <ActivityIndicator
            animating={this.state.animating}
            size={'small'}/>
          <ActivityIndicator
              animating={this.state.animating}
              size={'large'}/>
          <Button
              onPress={ClickBtn.bind(this)}
              title="显示/隐藏"
              color="#841584"
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  demoTest: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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