Obtenir la valeur actuelle de Animated.Value, React-native

Question

Je suis en train d'essayer d'animer View avec interpolate. J'aimerais obtenir la valeur actuelle de mon Animated.Value, mais je ne sais pas comment. Je n'ai pas compris comment le faire avec la documentation de React-native.

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

J'ai découvert comment obtenir une valeur :

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

MODIFIER

Pour consigner une valeur, je fais ce qui suit :

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

Answer 2

Cela fonctionne aussi pour moi...

const headerHeight = new Animated.Value(0);

Après quelques manipulations....

console.log(headerHeight.__getValue())

Cela semble un peu bricolé mais cela fait le travail...

Answer 3

Pour les personnes avec typescript.

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

Cela a fonctionné pour moi pour compiler tsc en tant que any.

Answer 4

Edit : ATTENTION - PEUT CAUSER DES PROBLÈMES DE PERFORMANCE GRAVES. Je n'ai pas pu comprendre pourquoi, mais si vous utilisez ceci pour 30+ animations simultanées, votre taux de rafraîchissement ralentira considérablement. Il semble que ce doit être un bogue dans react-native avec Animated.Value addListener car je ne vois rien de mal avec mon code, il ne fait que définir un auditeur qui définit une référence qui devrait être instantanée.

Voici un crochet que j'ai développé pour le faire sans recourir à l'accès à des valeurs internes privées.

/**
 * Puisqu'il n'y a pas de moyen (officiel) de lire une Animated.Value de manière synchrone, voici la meilleure solution que j'ai pu trouver
 * pour avoir accès à une copie à jour de la dernière valeur sans sacrifier les performances.
 * 
 * @param animatedValue l'Animated.Value à suivre
 * @param initial Valeur initiale facultative si vous la connaissez pour initialiser la référence de la dernière valeur avant que l'auditeur de la valeur animée ne se déclenche pour la première fois
 *
 * renvoie une référence avec la dernière valeur de l'Animated.Value et une référence booléenne indiquant si une valeur a déjà été reçue
 */
const useAnimatedLatestValueRef = (animatedValue: Animated.Value, initial?: number) => {
    // Si nous avons une valeur initiale, alors nous pouvons prétendre avoir reçu une valeur de l'auditeur déjà
    const latestValueRef = useRef(initial ?? 0)
    const initialized = useRef(typeof initial == "number")

    useEffect(() => {
        const id = animatedValue.addListener((v) => {
            // Stocker la dernière valeur animée
            latestValueRef.current = v.value
            // Indiquer que nous avons reçu une valeur
            initialized.current = true
        })

        // Renvoyer une fonction de désenregistrement pour nettoyer
        return () => animatedValue.removeListener(id)

        // Notez que le comportement ici n'est pas de 100% correct si la valeur animée change -- la référence retournée
        // peut se référer à la dernière valeur la plus récente de la valeur animée précédente jusqu'à ce que le nouvel auditeur renvoie une valeur
    }, [animatedValue])

    return [latestValueRef, initialized] as const
}

Answer 5

Number.parseInt(JSON.stringify(translateAnim))

Cela fonctionne sur React Hook