ReactNative Animated 动画进度条

import React, { useRef, useState } from 'react';
import { Animated, Easing, StyleSheet, View } from 'react-native';
 
const ProgressBar = ({ width, height, color }) => {
  const progressAnimation = useRef(new Animated.Value(0)).current;
  const [isAnimating, setIsAnimating] = useState(false);
 
  const startAnimation = () => {
    setIsAnimating(true);
    Animated.timing(progressAnimation, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => setIsAnimating(false));
  };
 
  const animatedStyle = {
    width: progressAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [0, width],
    }),
    height,
    backgroundColor: color,
  };
 
  return (
    <View style={styles.container}>
      <Animated.View style={[styles.progressBar, animatedStyle]} />
      <Button title="Start Animation" onPress={startAnimation} disabled={isAnimating} />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  progressBar: {
    height: 10,
  },
});
 
export default ProgressBar;

这段代码定义了一个名为ProgressBar的React组件，它使用Animated创建了一个水平进度条，并提供了一个按钮来启动进度条的动画。动画效果是从进度条的左端到右端的填充，使用线性的缓动函数，并且在动画开始和结束时更新组件状态。