React Native中Animated.loop使用useNativeDriver报错求助

问题描述 #

在React Native中实现圆形脉冲循环动画时，使用Animated API遇到错误：

TypeError: animation._isUsingNativeDriver is not a function. (In 'animation._isUsingNativeDriver()', 'animation._isUsingNativeDriver' is undefined)

相关代码如下：

const animatedValue = useRef(new Animated.Value(0)).current;  

const onPressIn = ()=>{
    Animated.loop([
      Animated.timing(animatedValue, {
        toValue: 2.2,
        duration: 2000,
        useNativeDriver:true,
      }),
      Animated.timing(animatedValue, {
        toValue: 0.9,
        duration: 700,
        useNativeDriver:true,
      })
    ],{useNativeDriver:true}).start()
};

<Animated.View style={{width:70,height:70,borderRadius:70/2,backgroundColor:'red',transform:[{scale:animatedValue}], position:'absolute',top:10,right:10,zIndex:9999999999}} >
        
</Animated.View>

移除所有useNativeDriver配置后错误消失，但希望保留Native Driver以优化性能。

解决方案 #

错误根源是**Animated.loop函数不支持useNativeDriver作为配置参数**，该参数仅需在内部具体的动画实例（如Animated.timing）中设置即可。修改后的代码如下：

const animatedValue = useRef(new Animated.Value(0)).current;  

const onPressIn = ()=>{
    Animated.loop([
      Animated.timing(animatedValue, {
        toValue: 2.2,
        duration: 2000,
        useNativeDriver: true,
      }),
      Animated.timing(animatedValue, {
        toValue: 0.9,
        duration: 700,
        useNativeDriver: true,
      })
    ]).start(); // 移除loop的useNativeDriver配置
};

<Animated.View style={{width:70,height:70,borderRadius:35,backgroundColor:'red',transform:[{scale:animatedValue}], position:'absolute',top:10,right:10,zIndex:9999999999}} >
        
</Animated.View>

关键说明 #

• useNativeDriver是单个动画（如timing、spring）的专属配置，用于指定是否使用原生驱动执行动画，以此提升性能。
• Animated.loop仅负责循环执行传入的动画序列，本身不处理驱动逻辑，因此不需要传递该参数。

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