React Native自定义AnimatedPath组件颜色插值Android报错问题

问题原因 #

iOS端原生动画驱动支持字符串类型的颜色插值结果，但Android端的原生动画系统无法直接处理字符串类型的插值输出，导致类型转换错误java.lang.String cannot be cast to com.facebook.react.bridge.ReadableMap。

解决方法 #

1. 使用react-native-svg自带的Animated模块 #

react-native-svg提供了专属的Animated实现，对SVG属性的动画支持更适配，替换react-native的Animated即可解决：

// 替换导入语句
import { Animated, Path } from 'react-native-svg';

// 创建AnimatedPath组件
const AnimatedPath = Animated.createAnimatedComponent(Path);

// 原有的颜色插值代码保持不变
const colors = {
    white: "#FFFFFF",
    green_300: '#34CB65'
};

const fill = translateX.interpolate({
    inputRange: [-width / 3, 0, width / 3],
    outputRange: [colors.white, colors.green_300, colors.white],
});

// 使用AnimatedPath时正常传入fill和stroke
<AnimatedPath fill={fill} stroke={fill} {...otherProps} />

2. 禁用原生动画驱动 #

如果不想替换Animated模块，可以在启动动画时关闭原生驱动，让JS线程处理动画（性能略低，但简单有效）：

Animated.timing(translateX, {
    toValue: targetValue, // 你的目标值
    duration: 500,
    useNativeDriver: false, // 关键：禁用原生驱动
}).start();

3. 数值形式颜色插值 #

将颜色转换为十进制数值，让插值输出数值类型（原生驱动支持数值插值），再转为十六进制字符串使用：

// 将颜色定义为十进制数值
const colors = {
    white: 0xFFFFFF,
    green_300: 0x34CB65
};

// 基于数值插值
const fillValue = translateX.interpolate({
    inputRange: [-width / 3, 0, width / 3],
    outputRange: [colors.white, colors.green_300, colors.white],
});

// 在组件中转回十六进制颜色字符串
<AnimatedPath
    fill={`#${fillValue.toString(16).padStart(6, '0')}`}
    stroke={`#${fillValue.toString(16).padStart(6, '0')}`}
    {...otherProps}
/>

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