React Native类组件进度条转函数组件及功能优化需求

以下是基于你提供的代码改造后的函数组件，已满足60秒动画时长、带背景色、支持传入自定义内部View/Text展示数据的要求：

import React, { useState, useRef, useEffect } from 'react';
import { StyleSheet, View, Animated, Text } from 'react-native';

const ProgressBar = ({ children }) => {
  const [progressStatus, setProgressStatus] = useState(0);
  // 存储动画实例避免组件重渲染时被重置
  const anim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 监听动画值变化更新进度状态
    const progressListener = anim.addListener(({ value }) => {
      setProgressStatus(parseInt(value, 10));
    });

    // 启动60秒进度动画
    Animated.timing(anim, {
      toValue: 100,
      duration: 60000,
      useNativeDriver: false
    }).start();

    // 组件卸载时清理监听器避免内存泄漏
    return () => {
      anim.removeListener(progressListener);
    };
  }, [anim]);

  return (
    <View style={styles.container}>
      {/* 进度条主体 */}
      <Animated.View
        style={[
          styles.inner,
          { width: `${progressStatus}%` }
        ]}
      />
      {/* 渲染外部传入的自定义内容 */}
      {children}
      {/* 默认百分比展示，不需要可直接删除 */}
      <Animated.Text style={styles.label}>
        {progressStatus}%
      </Animated.Text>
    </View>
  );
};

export default ProgressBar;

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: 40,
    padding: 3,
    borderColor: "#FAA",
    borderWidth: 3,
    borderRadius: 30,
    justifyContent: "center",
  },
  inner: {
    height: 30,
    borderRadius: 15,
    backgroundColor: "green",
  },
  label: {
    fontSize: 23,
    color: "black",
    position: "absolute",
    zIndex: 1,
    alignSelf: "center",
  }
});

自定义内容使用示例 #

需要传入自定义View/Text时直接嵌套组件即可：

// 业务页面调用示例
<ProgressBar>
  <View style={{ position: 'absolute', left: 12, zIndex: 2 }}>
    <Text style={{ color: '#fff', fontSize: 14 }}>当前剩余时长：{60 - progressStatus}s</Text>
  </View>
  <View style={{ position: 'absolute', right: 12, zIndex: 2 }}>
    <Text style={{ color: '#333', fontSize: 14 }}>任务进行中</Text>
  </View>
</ProgressBar>

核心调整说明 #

• 动画时长从原代码的50秒调整为60000ms，符合60秒完成进度的要求
• 新增children参数支持，可任意嵌套自定义展示内容
• 用React Hooks适配函数组件逻辑，新增动画监听器清理逻辑避免内存泄漏
• 保留原有背景色、边框等样式，可直接修改样式对象自定义外观

内容的提问来源于stack exchange，提问作者sourabh atigre