获取Animated.Value的当前值，React-native

Question

我正在尝试使用插值动画视图。我想获取 Animated.Value 的当前值，但不知道如何获取。我不明白如何使用 React-native docs.

this.state = {
      translateAnim: new Animated.Value(0)
}
DeviceEventEmitter.addListener('Accelerometer', function (data) {
  console.log(this.state.translateAnim);
  // returns an object, but I need a value in current moment
}

Answer 1

我发现了，如何获取一个值：

this.state.translateAnim.addListener(({value}) => this._value = value);

编辑

为了记录一个值，我执行以下操作：

console.log(this.state.translateAnim._value)

Answer 2

这对我也适用...

const headerHeight = new Animated.Value(0);

经过一些操作......

console.log(headerHeight.__getValue())

这感觉很糟糕，但它完成了工作...

Answer 3

对于打字稿的人。

console.log((this.state.translateAnim as any)._value);

它对我来说很有效，可以像任何人一样完成 tsc。

Answer 4

编辑：小心 - 可能会导致严重的性能问题。我一直无法弄清楚为什么，但是如果你将它用于 30 多个同步动画，你的帧率会变慢。看来这一定是使用 Animated.Value addListener 的 react-native 中的错误，因为我没有发现我的代码有任何问题，它只设置了一个监听器，该监听器设置了一个应该是瞬时的 ref。

这是我想出的一个钩子，无需诉诸于访问私有内部值。

/**
 * Since there's no (official) way to read an Animated.Value synchronously this is the best solution I could come up with
 * to have access to an up-to-date copy of the latest value without sacrificing performance.
 * 
 * @param animatedValue the Animated.Value to track
 * @param initial Optional initial value if you know it to initialize the latest value ref before the animated value listener fires for the first time
 *
 * returns a ref with the latest value of the Animated.Value and a boolean ref indicating if a value has been received yet
 */
const useAnimatedLatestValueRef = (animatedValue: Animated.Value, initial?: number) => {
    //If we're given an initial value then we can pretend we've received a value from the listener already
    const latestValueRef = useRef(initial ?? 0)
    const initialized = useRef(typeof initial == "number")

    useEffect(() => {
        const id = animatedValue.addListener((v) => {
            //Store the latest animated value
            latestValueRef.current = v.value
            //Indicate that we've recieved a value
            initialized.current = true
        })

        //Return a deregister function to clean up
        return () => animatedValue.removeListener(id)

        //Note that the behavior here isn't 100% correct if the animatedValue changes -- the returned ref
        //may refer to the previous animatedValue's latest value until the new listener returns a value
    }, [animatedValue])


    return [latestValueRef, initialized] as const
}

Answer 5

Number.parseInt(JSON.stringify(translateAnim))

它适用于 React Hook

Answer 6

好像是私人的属性。但对我有用。有助于调试，但不建议在生产中使用它。

translateAnim._value

获取Animated.Value的当前值，React-native

Get current value of Animated.Value, React-native

reactjs

react-native

react-native-android