RN控件之ProgressBarAndroid进度条

时间:2023-03-09 12:54:40
RN控件之ProgressBarAndroid进度条
 /**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
ProgressBarAndroid
} from 'react-native'; class MyProject2 extends Component {
render() {
return (
<View>
<Text>
ProgressBarAndroid控件实例
</Text>
<ProgressBarAndroid color="red" styleAttr="Inverse"/>
<ProgressBarAndroid color="green" styleAttr="Horizontal" progress={0.2}
indeterminate={false} style={{marginTop:10}}/>
<ProgressBarAndroid color="green" styleAttr="Horizontal"
indeterminate={true} style={{marginTop:10}}/>
<ProgressBarAndroid color="black" styleAttr="SmallInverse"
style={{marginTop:10}}/>
<ProgressBarAndroid styleAttr="LargeInverse" style={{marginTop:10}}/>
</View>
);
}
}
AppRegistry.registerComponent('MyProject2', () => MyProject2);

RN控件之ProgressBarAndroid进度条

一.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