React Native 带动画效果的进度条

17 Mar 2025 | 阅读 2 分钟

在之前的 ProgressBarAndroid 教程中，我们学习了如何显示默认的进度条。但是，我们也可以使用 Animated 类自定义进度条。

React Native 带动画效果的进度条示例

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

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",
  }
});

进度条的 progress status 以每 0.5 秒（50000 微秒）的间隔更新。同时，进度条的宽度由 progress status 确定，其 status 设置到 Animated.Text 组件中。

输出