Реагируйте на нативные поразительные анимации на Animated.Image получает TypeError: undefined не является объектом (оценивает 'value.getValue')

Question

Я пытаюсь поразить две анимации, в которых у меня есть изображение, которое исчезает на экране, а затем транслируется вниз. (Я оживляю посадку семени)

Семя - это его собственный компонент:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View, Image, Animated, StyleSheet } from 'react-native';
import seed from '../images/seed.png';

export default class SeedComponent extends Component {

    state = {
        opacity: new Animated.Value(0),
        movement: new Animated.Value(0)
    }

    componentDidMount() {
        const fadeAnimation = 
        Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true
        });

        const moveAnimation = 
        Animated.timing(this.state.movement, {
            toValue: 100,
            duration: 500,
            useNativeDriver: true
        });

        Animated.stagger(500,[
            fadeAnimation,
            moveAnimation
          ]).start();
    }

    render() {
        const animationStyles = {
            opacity: this.state.fadeAnimation,
            transform: [
              { translateY: this.state.moveAnimation},
            ]
          };
        return (
            <View>
            <Animated.Image source={seed} style={[styles.image, animationStyles]} ></Animated.Image>
            </View>
        );
      }
    }


const styles = StyleSheet.create({
    container: {  
      flex: 1, 
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems:'center'
    },
    image: {
        width:100,
        height:100

    }
  });

, который я импортирую в файл приложения. js.

Однако Я получаю следующую ошибку:

TypeError: undefined is not an object (evaluating 'value.getValue')

Ошибка

Я уже определил значения в

state = {
        opacity: new Animated.Value(0),
        movement: new Animated.Value(0)
    }

Так что я решил, что было бы хорошо использовать ComponentDidMount. Тем не менее, мне не обязательно использовать его. Я просто хочу иметь возможность иметь несколько анимаций на одном изображении последовательно или с ошеломлением.

Я подозреваю, что ошибка может составлять l ie с тегом <Animated.Image>, но я не могу найти работу вокруг для этого.

Answer 1

 const animationStyles = {
            opacity: this.state.fadeAnimation,
            transform: [
              { translateY: this.state.moveAnimation},
            ]
          };

fadeAnimation и moveAnimation не являются вашими анимированными значениями. его непрозрачность и движение. Измените его на

 const animationStyles = {
                opacity: this.state.opacity,
                transform: [
                  { translateY: this.state.movement},
                ]
              };

Answer 2

Вы пытались переместить инициализацию состояния в конструктор? Однако я не подозреваю, что это проблема, именно так я всегда делал это и во всех документах, которые я читал.