React Native 背景颜色插值给出数组越界错误|索引0超出空数组的界限

hrirmatl  于 2023-04-22  发布在  React
关注(0)|答案(1)|浏览(114)

我只是想改变背景颜色从红色到绿色,但我一直得到以下错误。

这里是组件

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; // Initial value for opacity: 0
  const scaleValue = useRef(new Animated.Value(1)).current; // Initial value for opacity: 0
  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,
          // easing: Easing.exp(),
        }),
        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: 10,
      duration: 1000,
      useNativeDriver: true,
    }).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",
  },
});

尝试了一切……
期望得到改变背景颜色从红色到绿色
我只是在这里输入的东西,因为堆栈溢出是要求更多的细节,我不能解释的question任何比我已经深入

643ylb08

643ylb081#

原来你必须关闭useNativeDriver,因为它不支持本机线程上的backgroundColor。s/o chat gpt以获取答案

相关问题