时间戳

首页 > 解决方案 > Animated.Image 上的 React Native 交错动画接收 TypeError: undefined is not an object (evalating 'value.getValue')

javascript - Animated.Image 上的 React Native 交错动画接收 TypeError: undefined is not an object (evalating 'value.getValue')

问题描述

我试图错开两个动画，其中我有一个淡入屏幕的图像，然后向下平移。（我正在为种植种子制作动画）

种子是它自己的组件：

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

    }
  });

我在 App.js 文件中导入。

但是，我不断收到以下错误：

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

错误

我已经在

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

所以我认为使用 ComponentDidMount 就可以了。但是，我不一定需要使用它。我只想能够在单个图像上按顺序或惊人地制作多个动画。

我怀疑错误可能在于<Animated.Image>标签，但我无法找到解决方法。

标签： javascriptreactjsreact-nativeanimationreact-animated

解决方案

您是否尝试过将状态初始化移动到构造函数中？但是，我不会怀疑这是问题所在，这就是我一直这样做的方式，并且在我阅读过的所有文档中都是如此。

推荐阅读