React Native的ProgressBarAndroid组件用于指示某些活动或应用程序正在加载某些东西的进度状态。 ProgressBarAndroid组件仅在Android平台上有效。要在iOS平台上使用进度条,请使用ProgressViewIOS组件。
Props | Type | Required | Description |
---|---|---|---|
animating | bool | no | 用于显示或隐藏进度条。它的默认值是true表示显示(false表示隐藏)。 |
color | color | no | 它设置进度条的颜色。 |
indeterminate | indeterminateType | no | 显示进度条的中间进度状态。如果进度条的styleAtte为“水平”,则只能为false。 |
progress | number | no | 它是介于0和1之间的进度值。 |
styleAttr | enum | no | 它设置进度条的样式。 React Native中有多种样式的进度条,例如Horizontal,Normal(默认),Small,Large,Inverse,SmallInverse和LargeInverse。 |
testID | string | no | 它用于在端到端测试中定位此视图。 |
在此示例中,我们将实现水平的ProgressBarAndroid并在TouchableOpacity组件上执行操作。进度状态将在“Text”组件中最多显示3位数字。
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text, TouchableOpacity, ProgressBarAndroid, ProgressViewIOS } from 'react-native'; export default class MyApp extends Component<{}>{ constructor() { super(); this.state = { progressStatus: 0, } } start_Progress = () => { this.value = setInterval( () => { if(this.state.progressStatus <= 1){ this.setState({progressStatus: this.state.progressStatus+ .01}) } }, 100 ); } stop_Progress = () =>{ clearInterval(this.value); } clear_Progress =()=>{ this.setState({progressStatus : 0.0}) } render() { return( <View style = { styles.MainContainer }> <Text style = {{fontSize: 20, color: '#000'}}> Progress Value: { parseFloat((this.state.progressStatus * 100).toFixed(3))} %</Text>{ ( Platform.OS === 'android' ) ? ( <ProgressBarAndroid styleAttr = "Horizontal" progress = { this.state.progressStatus } indeterminate = { false } /> ) : ( <ProgressViewIOS progress = { this.state.progressStatus } /> ) } <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.start_Progress }> <Text style = { styles.TextStyle }> Start Progress </Text> </TouchableOpacity> <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.stop_Progress }> <Text style = { styles.TextStyle }> Stop Progress </Text> </TouchableOpacity> <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.clear_Progress }> <Text style = { styles.TextStyle }> Reset Progress </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0, margin: 20 }, button: { width: '100%', backgroundColor: '#00BCD4', borderRadius:5, padding: 10, marginTop: 10, }, TextStyle:{ color:'#fff', textAlign:'center', fontWeight: 'bold', } });
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)