React Native开发小白

React Native组件学习 ActivityIndicat

2018-05-01  本文已影响19人  天方夜歌

小萌说一个简单的组件ActivityIndicator,觉得简单的可以绕路的,小萌是写给React Native开发小白的,ActivityIndicator的效果就是在安卓中或iOS中经常看到的加载中,在android中ActivityIndicator是progressBar 的Indeterminate(false)模式,在iOS中就是菊花旋转样式啦。

具体属性比较少,用法也简单:

属性 类型 描述
animating bool 默认true,如果为false,将不再显示。
color function 指示器的颜色, ios默认为gray(#999999),android 默认使用progressBar的系统样式,取决于你设置的style。
size string iOS中‘small’: 宽高各20 ‘large’: 宽高各36 ,android可以随便定义大小
hidesWhenStopped bool 仅iOS,当停止动画的时候,是否隐藏。默认为true。

完整代码:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
} from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={{flex:1}}>
                <View style={{flexDirection:'row'}}>
                    <Text>全部默认:</Text>
                    <ActivityIndicator />
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>添加背景色:</Text>
                    <ActivityIndicator style={{backgroundColor:'blue'}}/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>animating=false (隐藏):</Text>
                    <ActivityIndicator animating={false}/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>设置color:</Text>
                    <ActivityIndicator color='red'/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>size small:</Text>
                    <ActivityIndicator size="small"/>
                    <Text>size large:</Text>
                    <ActivityIndicator size="large"/>

                </View>
                
            </View>
    );
  }
}

和其他小组件差不多,用法简单

上一篇 下一篇

猜你喜欢

热点阅读