我正在尝试为我的react native项目建立一个进度条 它应该是一个通用组件,可以在许多地方使用。

进度条tsx:

import React, { useEffect } from 'react'
import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'

interface Props {
  total: number
  progress: number
  color?: string
  backgroundColor?: string
  height?: number
  style?: StyleProp<ViewStyle>
  animDelay?: number
  animDuration?: number
  testID?: string
}

const ProgressBar = ({
  color,
  backgroundColor,
  style,
  height,
  animDelay,
  animDuration,
  total,
  progress,
  testID = 'progress-bar',
}: Props): JSX.Element => {
  const minWidthValue = 5.4
  const percentage = total && progress ? Math.min(progress, total) / total : 0
  const minDisplayWidth =
    percentage > 0 && percentage < minWidthValue ? minWidthValue : percentage
  const barWidth = `${Math.max(minDisplayWidth, Math.floor(percentage * 100))}%`

  useEffect(() => {
    const animationValue = new Animated.Value(0)
    Animated.timing(animationValue, {
      toValue: progress,
      delay: animDelay,
      duration: animDuration,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <View
      testID={testID}
      style={[
        styles.container,
        height ? { height } : undefined,
        backgroundColor ? { backgroundColor } : undefined,
        style,
      ]}>
      <Animated.View
        style={[
          styles.bar,
          {
            backgroundColor: color,
            width: barWidth,
          },
        ]}
      />
    </View>
  )
}

export default ProgressBar

const BORDER_RADIUS = 15

const styles = StyleSheet.create({
  bar: {
    borderRadius: BORDER_RADIUS,
    height: '100%',
  },
  container: {
    borderRadius: BORDER_RADIUS,
    flexDirection: 'row',
    height: 30,
    overflow: 'hidden',
    width: '100%',
  },
})

还有usesage的例子,比如说在家里。tsx:

<ProgressBarWrapper total={100} progress={50} testID='test-id-test-1' />

有了上面的代码,我只得到一个静态条,根本没有移动。。 有人能指出我哪里做错了吗? 干杯

已编辑:

我已更新代码

useNativeDriver

interpolation 此处使用“钳位”避免振荡

然而,动画仍然没有移动/工作,不知道有什么建议。 谢谢

const ProgressBarInternal = ({
  color,
  backgroundColor,
  style,
  height,
  animDelay,
  animDuration,
  total,
  progress,
  testID = 'progress-bar',
  borderRadius,
  containerHeight,
  onAnimationDidEnd,
}: Props): JSX.Element => {
  const minWidthValue = 5.4
  const percentage = total && progress ? Math.min(progress, total) / total : 0
  const minDisplayWidth =
    percentage > 0 && percentage < minWidthValue ? minWidthValue : percentage
  const progressingBarWidthPercentage = `${Math.max(minDisplayWidth, Math.floor(percentage * 100))}%`

  const animatingProgressBar = useRef(new Animated.Value(0))
  useEffect(() => {
    Animated.timing(animatingProgressBar.current, {
      toValue: 0,
      delay: animDelay,
      duration: animDuration,
      useNativeDriver: true,
    }).start()
  }, []
  );

  return (
    <View
      testID={testID}
      style={...}>
      <Animated.View        
        style={[
          styles.bar,
          { borderRadius: borderRadius },
          {
            backgroundColor: color,
            width: progressingBarWidthPercentage,
          },
          {
            transform: [
              {
                translateX: animatingProgressBar.current.interpolate({
                  inputRange: [1, 100],
                  outputRange: ["0%", "100%"],
                  extrapolate: "clamp"
                }),
              },
            ],
          },
        ]}
      />
    </View>
  )
}