React Native背景色插值触发数组越界错误：索引0超出空数组范围

错误原因 #

你遇到的问题核心有两点：

1. 原生驱动不支持颜色动画：React Native的Animated模块中，useNativeDriver: true仅支持transform（旋转、缩放等）和opacity属性的动画，无法处理backgroundColor这类样式属性，强行开启会触发报错。
2. 插值范围不匹配：你的backgroundValue插值设置了inputRange: [0,100]对应["red","green"]，但点击事件里将toValue设为10，只能切换到红绿色之间的浅色调，无法完全变为绿色。

修复步骤 #

• 给backgroundValue的Animated.timing配置显式设置useNativeDriver: false
• 将点击事件中backgroundValue的toValue改为100，匹配插值的输入范围

修正后的完整代码 #

import { View, Text, Image, StyleSheet } from "react-native";
import React, { useRef, useEffect } from "react";
import { Animated, Easing } from "react-native";
import { Keyframe } from "react-native-reanimated";

export default function Intro() {
  const spinValue = useRef(new Animated.Value(0)).current;
  const scaleValue = useRef(new Animated.Value(1)).current;
  const opacityValue = useRef(new Animated.Value(1)).current;
  const backgroundValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.sequence([
      Animated.parallel([
        Animated.timing(scaleValue, {
          toValue: 0.9,
          duration: 1000,
          delay: 500,
          useNativeDriver: true,
        }),
        Animated.timing(spinValue, {
          toValue: -0.05,
          duration: 1000,
          delay: 500,
          useNativeDriver: true,
        }),
      ]),
      Animated.parallel([
        Animated.timing(scaleValue, {
          toValue: 5,
          duration: 1000,
          useNativeDriver: true,
          easing: Easing.bezier(0.78, 0.27, 0.86, 0.34),
        }),
        Animated.timing(opacityValue, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true,
        }),
      ]),
    ]).start();
  }, []);

  const spinValueInter = spinValue.interpolate({
    inputRange: [0, 100],
    outputRange: ["0deg", "360deg"],
  });

  const backgroundValueInter = backgroundValue.interpolate({
    inputRange: [0, 100],
    outputRange: ["red", "green"],
  });

  function handleClick() {
    Animated.timing(spinValue, {
      toValue: 50,
      duration: 1000,
      useNativeDriver: true,
    }).start();
    Animated.timing(backgroundValue, {
      toValue: 100,
      duration: 1000,
      useNativeDriver: false,
    }).start();
  }

  return (
    <Animated.View
      style={[
        styles.container,
        {
          backgroundColor: backgroundValueInter,
        },
      ]}
    >
      <Animated.Image
        style={[
          styles.image,
          {
            transform: [{ rotate: spinValueInter }, { scale: scaleValue }],
            opacity: opacityValue,
          },
        ]}
        source={require("../assets/intro-logo.png")}
      />
      <Text onPress={handleClick}>Button</Text>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: "contain",
  },
});

额外说明 #

如果需要更流畅的颜色动画或想使用原生驱动，可以改用react-native-reanimated的interpolateColor和withTimingAPI，它对颜色动画的支持更完善。

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