React Native中如何解析Animated值并显示整数？

问题原因 #

你直接使用Number.parseInt(milliliters.ml)报错，是因为milliliters.ml是Animated.Value对象，并非普通的数值类型，无法直接用原生数值方法处理。

原生React Native Animated解决方案 #

方案1：用interpolate映射为整数字符串

直接在Animated.Text中通过interpolate将动画值映射为对应的整数字符串，无需额外状态：

// 修改AddDrink组件的返回部分
return (
  <Animated.Text>
    {milliliters.ml.interpolate({
      inputRange: [0, 240], // 覆盖你的数值范围（ML_LEVELS的最小/最大值）
      outputRange: Array.from({length: 241}, (_, i) => i.toString()), // 生成0-240的整数字符串数组
      extrapolate: 'clamp' // 超出范围时固定在边界值
    })}
  </Animated.Text>
);

方案2：通过监听器同步到状态显示整数

给Animated.Value添加监听器，将实时值同步到组件状态，取整后用普通Text组件显示：

// 修改AddDrink组件
import Milliliters from './milliliters';
import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';

export default function AddDrink() {
  const milliliters = React.useRef(new Milliliters()).current;
  const [mlInt, setMlInt] = useState(Math.round(milliliters.ml._value));

  useEffect(() => {
    milliliters.ml_up_down();
    // 添加值变化监听器
    const listener = milliliters.ml.addListener(({ value }) => {
      setMlInt(Math.round(value));
    });
    // 组件卸载时移除监听器
    return () => milliliters.ml.removeListener(listener);
  }, []);

  return <Text>{mlInt}</Text>;
}

推荐动画库：React Native Reanimated #

如果需要更灵活的动画处理，推荐使用React Native Reanimated（v2+），它的API更强大，处理这类数值转换更简洁：

步骤1：重构Milliliters组件

import Animated, { useSharedValue, withSequence, withTiming, Easing } from 'react-native-reanimated';
import React from 'react';

export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = useSharedValue(ML_LEVELS[0]);

  const ml_up_down = () => {
    ml.value = withSequence(
      withTiming(ML_LEVELS[1], {
        duration: 2000,
        easing: Easing.bezier(.55, .5, .45, .5),
      }),
      withTiming(ML_LEVELS[2], {
        duration: 2000,
        easing: Easing.ease,
      })
    );
  };

  return { ml, ml_up_down };
}

步骤2：修改AddDrink组件

import Milliliters from './milliliters';
import React, { useEffect } from 'react';
import Animated, { useDerivedValue } from 'react-native-reanimated';

export default function AddDrink() {
  const { ml, ml_up_down } = Milliliters();

  useEffect(() => {
    ml_up_down();
  }, []);

  // 实时派生整数动画值
  const mlInt = useDerivedValue(() => Math.round(ml.value));

  return <Animated.Text>{mlInt}</Animated.Text>;
}

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