Получить текущее значение Animated.Value, React-native

Я пытаюсь анимировать View с интерполяцией. Я хотел бы получить текущее значение моего Animated.Value, но не знаю, как это сделать. Я не понял, как это сделать с помощью Нативные документы React.

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
}

person Evgeny Kuznetsov    schedule 30.01.2017    source источник


Ответы (5)


Я узнаю, как получить значение:

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

РЕДАКТИРОВАТЬ

чтобы зарегистрировать значение, я делаю следующее:

console.log(this.state.translateAnim._value)
person Evgeny Kuznetsov    schedule 30.01.2017
comment
С помощью tsc предупредите меня: The property '_value' does not exist in the 'Value' type. - person jose920405; 16.01.2018
comment
@ jose920405 jose920405 вы когда-нибудь выясняли, как заставить это скомпилироваться с помощью tsc? - person Adam Duro; 20.04.2018
comment
Этот наблюдатель задокументирован по адресу: facebook.github.io/react-native/docs/ 0.5/animatedvalue - они говорят, что это полезно, потому что нет возможности синхронно прочитать значение, потому что оно может управляться изначально. - person Darko Maksimovic; 08.03.2019
comment
Можно использовать комментарий //@ts-ignore, чтобы игнорировать предупреждения tsc для строки - person Zaslam; 20.08.2019
comment
в нативной версии React 0.59.1 говорится, что addListener не является функцией. Поправьте меня, если я ошибаюсь. Я никак не мог утешить анимированное значение. - person DEEPAN KUMAR; 15.09.2019

Это также работает для меня...

const headerHeight = new Animated.Value(0);

После некоторых манипуляций....

console.log(headerHeight.__getValue())

Это кажется хакерским, но оно выполняет свою работу...

person moQuez    schedule 17.04.2018
comment
ПРЕДУПРЕЖДЕНИЕ. Это всегда будет возвращать 0, если userNativeDriver имеет значение true. - person Palisand; 25.05.2018
comment
Вы добавляете addListener в функциональные компоненты? - person roz333; 05.01.2020
comment
@roz333 roz333 Я написал хук для обработки этого в своем ответе ниже stackoverflow.com/a/61260706/1294382 - person imagio; 17.04.2020
comment
useNativeDriver, а не userNativeDriver документ - person ; 22.03.2021

Для людей с машинописью.

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

У меня работало до полного tsc как и любое.

person A Bordonado    schedule 24.04.2018

редактировать: ВНИМАНИЕ - МОЖЕТ ПРИЧИНИТЬ СЕРЬЕЗНЫЕ ПРОБЛЕМЫ ПРОИЗВОДИТЕЛЬНОСТИ. Я не смог понять, почему, но если вы используете это для 30+ одновременных анимаций, ваша частота кадров упадет до минимума. Похоже, это должна быть ошибка в react-native с Animated.Value addListener, поскольку я не вижу ничего плохого в моем коде, он только устанавливает прослушиватель, который устанавливает ссылку, которая должна быть мгновенной.

Вот хук, который я придумал, чтобы сделать это, не прибегая к доступу к закрытым внутренним значениям.

/**
 * 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
}

person imagio    schedule 16.04.2020

Number.parseInt(JSON.stringify(translateAnim))

Работает на React Hook

person Soul Clinic    schedule 23.12.2020
comment
Большое спасибо! Это работает для меня, когда я пытаюсь преобразовать тип Animated.AnimatedMultiplication в number - person Jarrett; 25.05.2021
comment
parseInt(JSON.stringify(translateAnim)) тоже работает, но без Number впереди - person Jarrett; 25.05.2021