RNI与Expo Snack中Animated.Value结果差异及取值方法咨询

这个差异我之前也琢磨过，其实是Expo Snack和原生React Native（RNI）对控制台输出的处理逻辑不同导致的，下面给你拆解清楚：

为什么输出不一样？ #

• Expo Snack的控制台做了友好封装：它会自动解析Animated.Value实例，把内部存储的原始数值（也就是你看到的0）直接展示出来，帮开发者省去了解析对象的步骤，更直观。
• 原生RNI直接打印对象本身：Animated.Value是React Native动画系统封装的特殊类实例，内部包含了动画状态、偏移量、子节点等多个属性（就是你控制台看到的_children、_value这些私有字段），所以直接打印会输出整个对象的结构。

怎么在RNI中访问Animated.Value的实际数值？ #

根据你使用的组件类型，有不同的处理方式，包括你提到的use...相关的函数组件模式：

类组件（你当前的构造函数写法） #

1. 同步获取当前值（仅限非动画运行时）
   如果动画没有在运行，可以直接调用getValue()方法拿到原始数值：

   console.log("Animated Value:", this.animatedValue.getValue());
   

   注意：如果动画正在运行，getValue()可能返回不准确的中间值，因为动画是在原生线程异步执行的，这个方法只能同步获取JS线程的当前值。

2. 监听值的变化（动画运行时推荐使用）
   通过addListener订阅值的变化，每次数值更新都会收到回调，能准确获取动画过程中的实时值：

   componentDidMount() {
     // 保存监听引用，方便后续移除
     this.valueListener = this.animatedValue.addListener(({ value }) => {
       console.log("实时Animated Value:", value);
     });
   }
   
   componentWillUnmount() {
     // 组件卸载时移除监听，避免内存泄漏
     this.animatedValue.removeListener(this.valueListener);
   }
   

函数组件（use相关模式） #

在函数组件中，推荐用useRef来保存Animated.Value实例（避免组件重新渲染时重复创建实例），然后用同样的方式访问值：

import React, { useRef, useEffect } from 'react';
import { Animated, View } from 'react-native';

export default function App() {
  // 用useRef保存Animated.Value实例
  const animatedValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 监听值变化
    const listener = animatedValue.addListener(({ value }) => {
      console.log("实时Animated Value:", value);
    });

    // 组件卸载时清理监听
    return () => animatedValue.removeListener(listener);
  }, []);

  // 示例：启动一个简单动画
  Animated.timing(animatedValue, {
    toValue: 1,
    duration: 2000,
    useNativeDriver: false
  }).start();

  return <View />;
}

如果你的项目使用了react-native-reanimated库（现在主流的动画库），对应的是useSharedValue，可以直接通过.value访问数值，写法会更简洁：

import { useSharedValue } from 'react-native-reanimated';

const sharedValue = useSharedValue(0);
console.log("Shared Value:", sharedValue.value);

内容的提问来源于stack exchange，提问作者Defrian