Нарушение инварианта: Нарушение инварианта: Преобразование с ключом "rotateY" должно быть строкой: {"rotateY": 6}

Question

Я использовал анимацию в выставочном проекте реактивной системы.

Я собирался повернуть и изменить непрозрачность для моего компонента (Вид) при каждом изменении реквизита.

Но яне удалось воспроизвести эту анимацию.

Даже если я удалю анимацию поворота, она не будет работать для анимации непрозрачности.

Это мой экран ошибок.

И это мой некоторый код.

...
let rotateValue = new Animated.Value(0);
  let fadeValue = new Animated.Value(1);
const animationStart=()=>{
    return Animated.parallel([
      Animated.timing(rotateValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true
      }),
      Animated.timing(fadeValue, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true
      })
    ]).start();
  };

  React.useEffect(()=> {
    animationStart();
  }, [spinInfoData]);

   .....

<Animated.View style={{
        transform: [
          {
            rotateY: rotateValue.interpolate({
              inputRange: [0, 1],
              outputRange: [6, 0]
            })
          }
        ],
        opacity: fadeValue,
        display: "flex",
        justifyContent: "center",
        height: hp(spinSize),
        flexDirection: "row",
        marginTop: hp(spinSize / -6)
      }}>

     .......

Answer 1

Вы можете исправить ошибку, связанную с красным экраном, следующим образом.

transform: [
   {
      rotateY: rotateValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['180deg', '0deg']
      })
    }
 ],

И, пожалуйста, измените код для сброса анимации при смене реквизита следующим образом.

const rotateValue = new useRef(new Animated.Value(0)).current;
const saveRotateValue = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['180deg', '0deg']
  });

....
// change the props
React.useEffect(()=> {
    fadeValue.setValue(1); // reset the fade animation
    rotateValue.setValue(0); // reset the rotate animation
    Animated.parallel([
      Animated.timing(rotateValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true
      }),
      Animated.timing(fadeValue, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true
      })
    ]).start();
  }, [spinInfoData]);

    .......

<Animated.View style={{
   transform: [
     {
        rotateY: saveRotateValue
     }
    ],
   opacity: saveOpacity,

   ......