如何使React Native进度条与百分比计数器速度同步？

算力阿峰

2026-8-14

解决React Native中react-native-progress进度条与百分比计数器不同步的问题

问题根源是进度条和百分比使用了独立的状态更新逻辑，导致两者动画节奏不一致。要让它们同步，核心是共用同一个动画驱动源，让两者基于同一个值进行更新。

实现步骤与代码示例

使用React Native的Animated模块创建共享动画值，同时驱动进度条和百分比显示：

import React, { useRef } from 'react';
import { View, Text, Animated, Button } from 'react-native';
import * as Progress from 'react-native-progress';

const SyncProgressDemo = () => {
  // 共享动画值，范围 0-1（对应进度条的0%-100%）
  const progressAnim = useRef(new Animated.Value(0)).current;

  // 启动同步动画
  const startSyncProgress = () => {
    Animated.timing(progressAnim, {
      toValue: 1,
      duration: 2500, // 总动画时长，按需调整
      useNativeDriver: false, // 因需更新Text组件，禁用原生驱动
    }).start();
  };

  // 将0-1的动画值插值为0-100的百分比文本
  const percentageText = progressAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0', '100'],
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
      {/* 进度条直接绑定共享动画值 */}
      <Progress.Bar
        progress={progressAnim}
        width={null}
        height={24}
        color="#2196F3"
        unfilledColor="#E0E0E0"
        borderWidth={0}
      />
      {/* 百分比文本使用插值后的动画值 */}
      <Animated.Text style={{ marginTop: 12, textAlign: 'center', fontSize: 18 }}>
        {percentageText}%
      </Animated.Text>
      <Button title="开始同步进度" onPress={startSyncProgress} style={{ marginTop: 20 }} />
    </View>
  );
};

export default SyncProgressDemo;