React Native控件学习之ProgressBarAndroid讲解

(一)前言

今天主要来讲解一下ProgressBarAndroid进度条,ProgressBarAndroid是React Native封装了Android平台的ProgressBat控件。这个组件只要用来在App中内容加载进度显示。

(二)使用介绍

直接上官方代码:

 <View style={{backgroundColor:'green', alignItems:'center'}}>
              <Text>ProgressBarAndroid超级简单实例!</Text>
              <ProgressBarAndroid styleAttr='Inverse'/>
         </View>
},

运行效果如下:
这里写图片描述

(三)属性方法

首先ProgressBarAndroid继承View的所有属性,例如:大小、布局、边距等。

接下来以列表的方式列出属性方法:

名称 作用 value
color 进度条颜色 color颜色
indeterminate 设置是否需要显示一个总的进度值,这个属性是配合Horizontal样式使用的,默认是false bool
progress 设置当前加载进度值 number(0-1)
styleAttr 进度条框风格 enum(‘Horizontal’,’Small’,’Large’,’Inverse’,’SmallInverse’,’LargeInverse’,’Normal’)

(四)ProgressBarAndroid实例

 <View>
              <ProgressBarAndroid color='red' styleAttr='Inverse'/>
              <ProgressBarAndroid color='purple' styleAttr='Horizontal' progress={0.8} indeterminate={false} style={{marginTop:10}} />
              <ProgressBarAndroid color='green' styleAttr='Horizontal' indeterminate={true} style={{marginTop:10}}/>

              <ProgressBarAndroid color='black' styleAttr='SmallInverse' style={{marginTop:10}} />
              <ProgressBarAndroid color='black' styleAttr='Large' style={{marginTop:10}} />
         </View>

运行效果如下所示:
这里写图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐