封装了Android平台上的ProgressBar的React组件。这个组件可以用来表示应用正在加载或者有些事情正在进行中。
属性
名称 | 类型 | 必填 | 说明 |
animating | bool | 否 | 是否显示进度条 |
color | string | 否 | 进度条的颜色 |
indeterminate | indeterminateType | 否 | 决定进度条是否要显示一个不确定的进度。注意这个在styleAttr是Horizontal的时候必须是false。 |
progress | number | 否 | 当前的进度值（在0到1之间）。 |
styleAttr | enum(‘Horizontal’, ‘Normal’, ‘Small’, ‘Large’, ‘Inverse’, ‘SmallInverse’, ‘LargeInverse’) | 否 | 进度条的样式 |
实例
1. 逻辑代码
import React, { Component } from 'react';
import {
StyleSheet,
ProgressBarAndroid,
View,
Text
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
ProgressBarAndroid
</Text>
</View>
<View style={styles.inner}>
<ProgressBarAndroid color="red" styleAttr='Horizontal'
indeterminate={true}/>
<ProgressBarAndroid color="red" styleAttr='Horizontal' progress={0.6}
indeterminate={false} style={{marginTop:15}}/>
<ProgressBarAndroid color="black" styleAttr='SmallInverse'
style={{marginTop:15}}/>
<ProgressBarAndroid color="blue" styleAttr='Inverse'style={{marginTop:15}}/>
<ProgressBarAndroid styleAttr='LargeInverse'
style={{ marginTop: 15 }} />
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'white'
},
inner: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
title_view: {
flexDirection: 'row',
height: 50,
paddingLeft: 15,
paddingRight: 15,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#27b5ee',
},
title_text: {
color: 'white',
fontSize: 18,
textAlign: 'center'
},
});2. 效果图
