0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> Android 独有组件之 ProgressBarAndroid

封装了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. 效果图
【Kevin Learn React Native】--> Android 独有组件之 ProgressBarAndroid_react native


举报

相关推荐

0 条评论