关注我们

React Native - ProgressBar动画

在此示例中，我们将实现水平的ProgressBarAndroid并在TouchableOpacity组件上执行操作。进度状态将在“Text"组件中最多显示3位数字。

ProgressBar动画示例

要创建动画的进度条，我们需要导入TheAnimated类。在视图内添加Animated.View和Animated.Text组件。将变量进度状态初始化为0并调用onAnimate()方法。当屏幕完全加载(调用componentDidMount())时，将调用此方法。在onAnimate()方法上添加一个侦听器，以更新进度状态。

App.js

复制代码

import React, {Component} from 'react';  
import {Platform, StyleSheet, Text, View, Animated} from 'react-native';  
  
export default class App extends Component {  
    state={  
        progressStatus: 0,  
    }  
    anim = new Animated.Value(0);  
    componentDidMount(){  
        this.onAnimate();  
    }  
    onAnimate = () =>{  
        this.anim.addListener(({value})=> {  
            this.setState({progressStatus: parseInt(value,10)});  
        });  
        Animated.timing(this.anim,{  
             toValue: 100,  
             duration: 50000,  
        }).start();  
    }  
  render() {  
    return (  
      <View style={styles.container}>  
            <Animated.View  
                style={[  
                    styles.inner,{width: this.state.progressStatus +"%"},  
                ]}  
            />  
            <Animated.Text style={styles.label}>  
                    {this.state.progressStatus }%  
            </Animated.Text>  
      </View>  
    );  
  }  
}  
const styles = StyleSheet.create({  
    container: {  
    width: "100%",  
    height: 40,  
    padding: 3,  
    borderColor: "#FAA",  
    borderWidth: 3,  
    borderRadius: 30,  
    marginTop: 200,  
    justifyContent: "center",  
  },  
  inner:{  
    width: "100%",  
    height: 30,  
    borderRadius: 15,  
    backgroundColor:"green",  
  },  
  label:{  
    fontSize:23,  
    color: "black",  
    position: "absolute",  
    zIndex: 1,  
    alignSelf: "center",  
  }  
});

进度条的进度状态以每0.5秒(50000微秒)的间隔更新。同时，进度条的宽度由进度状态确定，其状态设置为Animated.Text组件。

无涯教程网

输出: