无法在react.native中为timing()函数设置持续时间

Question

我想在原生的react中创建循环计时器，但我在timing()函数上遇到了问题。下面是我的代码：

App.js:
import React from "react";
import { StyleSheet, View } from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import { timing } from "react-native-redash";

import CircularProgress from "./components/CircularProgress";

const { Clock } = Animated;

export default () => {
  const clock = new Clock();
  const config = {
    duration: 10 * 1000,
    toValue: 1,
    easing: Easing.linear,
  };
  return (
    <View style={styles.container}>
          <View style={styles.container1}></View>
          <View style={styles.container2}>
              <CircularProgress progress={timing(clock, 0, config)}/>
          </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#ffba00',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 0
  },

  container1: {
      backgroundColor: 'transparent',
      flex: 1
  },

  container2: {
      backgroundColor: '#fff',
      flex: 2,
      width: '100%',
      borderTopLeftRadius: 25,
      borderTopRightRadius: 25,
      alignItems: 'center'
  },

这是动画圆圈：

import * as React from "react";
import { Dimensions, StyleSheet } from "react-native";
import Svg, {
  Defs, LinearGradient, Stop, Circle,
} from "react-native-svg";
import Animated from "react-native-reanimated";

const { interpolate, multiply } = Animated;
const { width } = Dimensions.get("window");
const size = width / 4 ;
const strokeWidth = 25;
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const { PI } = Math;
const r = (size - strokeWidth) / 2;
const cx = size / 2;
const cy = size / 2;

interface CircularPogressProps {
  progress: Animated.Value<number>;
}

export default ({ progress }: CircularPogressProps) => {
  const circumference = r * 2 * PI;
  const α = interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, PI * 2],
  });
  const strokeDashoffset = multiply(α, r);
  return (
    <Svg width={size} height={size} style={styles.container}>
      <Defs>
        <LinearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
          <Stop offset="0" stopColor="#FEC423" />
          <Stop offset="1" stopColor="#ff0000" />
        </LinearGradient>
      </Defs>
      <Circle
        stroke="rgb(244, 244, 244)"
        fill="none"
        {...{
          strokeWidth, cx, cy, r,
        }}
      />
      <AnimatedCircle
        stroke="url(#grad)"
        fill="none"
        strokeDasharray={`${circumference}, ${circumference}`}
        {...{
          strokeDashoffset, strokeWidth, cx, cy, r,
        }}
      />
    </Svg>
  );
};

const styles = StyleSheet.create({
  container: {
    transform: [{ rotateZ: "270deg" }],
    marginTop: 30,
  },
});

一切看起来都很好，除了持续时间，我的动画不会持续10秒(就像我试图在config中设置持续时间: 10 * 1000，它只持续大约500ms )。有人知道这里有什么问题吗？

Answer 1

您正在使用react-native-redash库中的timing函数，而不是react-native-reanimated中的函数。根据documentation的说法，timing函数只有一个参数，而不是三个参数(像react-native-reanimated版本一样)。试试这个：

 <CircularProgress progress={timing({clock, to: 0, easing: Easing.linear, duration: 10000 })}/>