如何给Animated.Value设置字符串类型值而非数字类型值

写法可行性结论 #

你给出的React.useRef(new Animated.Value('15%')).current写法不可行。
Animated.Value底层仅支持数字类型作为输入值，它的动画计算逻辑完全基于数值运算，无法直接处理字符串类型的单位值，直接传入字符串会触发运行时报错。

带单位字符串值的实现方案 #

如果需要使用%、px、rem这类带单位的字符串样式值，需要搭配interpolate插值方法实现，步骤如下：

• 给Animated.Value设置纯数字的初始值、动画目标值，数值和你要的单位值的数值部分对应
• 调用interpolate方法，把数值输入范围映射为带单位的字符串输出范围
• 将插值后的返回值直接绑定到对应的样式属性上

代码示例 #

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

const PercentAnimationDemo = () => {
  // 初始值用纯数字，对应百分比的数值部分
  const widthAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 动画将数值从0修改为15
    Animated.timing(widthAnim, {
      toValue: 15,
      duration: 1200,
      useNativeDriver: false // 非transform类的带单位属性不支持原生驱动
    }).start();
  }, [widthAnim]);

  return (
    <Animated.View
      style={{
        // 插值生成带%的字符串值
        width: widthAnim.interpolate({
          inputRange: [0, 15],
          outputRange: ['0%', '15%'],
          extrapolate: 'clamp' // 避免数值超出范围时生成不符合预期的单位值
        }),
        height: 100,
        backgroundColor: '#2385bb'
      }}
    />
  );
};

注意事项 #

• interpolate的inputRange数组长度必须和outputRange数组长度完全匹配
• 除了百分比外，px、rem、rgba色值等字符串格式的样式值都可以通过这种方式映射生成

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