##ProgressBarAndroid的例子
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
ProgressBarAndroid,
} from 'react-native';
class RnDemo extends Component {
render() {
return (
<View style={styles.container}>
<ProgressBarAndroid
styleAttr="Inverse"
/>
</View>
);
}
}
注意要引入组件
##属性方法
- color 设置进度的颜色属性值
- indeterminate 设置是否要显示一个默认的进度信息，该如果styleAttr的风格设置成Horizontal的时候该值必须设置成false
- .progress 置当前的加载进度值(该值在0-1之间)
-
styleAttr 进度条框的风格 ，可以取的值如下:
Horizontal Small Large Inverse SmallInverse LargeInverse
##综合实例
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
ProgressBarAndroid,
} from 'react-native';
class RnDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text>
ProgressBarAndroid控件实例
</Text>
//红色圆形的进度条
<ProgressBarAndroid color="red" styleAttr='Inverse'/>
//绿色的水平进度条，有默认值
<ProgressBarAndroid color="green" styleAttr='Horizontal' progress={0.2}
indeterminate={false} style=/>
//绿色的水平进度条，没有默认值
<ProgressBarAndroid color="green" styleAttr='Horizontal'
indeterminate={true} style=/>
//大小
<ProgressBarAndroid color="black" styleAttr='SmallInverse'
style=/>
<ProgressBarAndroid styleAttr='LargeInverse'
style=/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1, //定义了flex属性标示当前的属性的可伸缩的
backgroundColor: '#efefef',
},
style_bottom: {
flex: 1,
flexDirection: 'row',//代表一行
alignItems: 'flex-end',//在底部
bottom: 10,//距离底部10
},
style_longin: {
marginTop: 15,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#63B8FF',
height: 35,
borderRadius: 5,
alignItems: 'center',//内部控件居中
justifyContent: 'center',//子控件位于父容器的居中
},
style_userinput: {
marginTop: 10,
backgroundColor: '#FFFFFF',
height: 35,
textAlign: "center"
},
style_image: {
borderRadius: 35,
height: 70,
width: 70,
marginTop: 40,
alignSelf: 'center',
},
style_view_unlogin: {
fontSize: 12,
color: '#63B8FF',
marginLeft: 10,
},
style_view_register: {
fontSize: 12,
color: '#63B8FF',
marginRight: 10,
alignItems: 'flex-end',
flex: 1,
textAlign: 'right',//文字靠右
}
});
AppRegistry.registerComponent('RnDemo', () => RnDemo);
