• RN控件之ProgressBarAndroid进度条


     1 /**
     2  * Sample React Native App
     3  * https://github.com/facebook/react-native
     4  */
     5 'use strict';
     6 import React, {
     7   AppRegistry,
     8   Component,
     9   StyleSheet,
    10   Text,
    11   View,
    12   ProgressBarAndroid
    13 } from 'react-native';
    14 
    15 class MyProject2 extends Component {
    16   render() {
    17       return (
    18           <View>
    19               <Text>
    20                   ProgressBarAndroid控件实例
    21               </Text>
    22               <ProgressBarAndroid color="red" styleAttr="Inverse"/>
    23               <ProgressBarAndroid color="green" styleAttr="Horizontal" progress={0.2}
    24                 indeterminate={false} style={{marginTop:10}}/>
    25               <ProgressBarAndroid color="green" styleAttr="Horizontal"
    26                 indeterminate={true} style={{marginTop:10}}/>
    27               <ProgressBarAndroid color="black" styleAttr="SmallInverse"
    28               style={{marginTop:10}}/>
    29               <ProgressBarAndroid styleAttr="LargeInverse" style={{marginTop:10}}/>
    30           </View>
    31       );
    32   }
    33 }
    34 AppRegistry.registerComponent('MyProject2', () => MyProject2);
    View Code

    一.ProgressBarAndroid

      1.该组件是React封装了Android平台的ProgressBar控件,用于显示APP中的内容加载过程中的进度信息 

      2.属性:

        (1)支持View控件的属性方法(这些属性是从View控件中继承下来,例如:大小,布局,边距)

        (2)color:设置进度条的颜色属性

        (3)indeterminate:设置是否要显示一个默认的进度信息,如果styleAttr风格设置成Horizontal的时候改值必须设置成false

        (4)progress(number):设置当前的加载进度值(该值在0-1之间)

        (5)styleAttr:进度条框的风格,可以取值如下:

          Horizontal

          Small

          Large

          Inverse

          SmallInverse

          LargeInverse

  • 相关阅读:
    3.24 每日一题题解
    3.23 每日一题题解
    3.22 每日一题题解
    【POJ1222】EXTENDED LIGHTS OUT
    【BZOJ1013】球形空间产生器sphere
    【hdu4135】【hdu2841】【hdu1695】一类通过容斥定理求区间互质的方法
    【HDU5862】Counting Intersections
    【HDU1542】Atlantis
    【自定义】抢妹子大作战
    【HDU5361】In Touch
  • 原文地址:https://www.cnblogs.com/ZSG-DoBestMe/p/5292055.html
Copyright © 2020-2023  润新知