Err: Ошибка при реализации метода реакции animation.timing

Question

По какой-то причине я не могу понять, что я делаю не так с моим кодом. Я, кажется, использую Animated, как показывает документация, но эта ошибка продолжает появляться. Фрагмент кода:

    import React ,{ Component} from "react";
    import { Card } from 'react-native-elements';
    import { Text, View ,Animated,Easing} from 'react-native';
    import { connect } from 'react-redux';
    import { baseUrl } from '../shared/baseUrl';
    import { Loading } from './LoadingComponent';

    const mapStateToProps = state => {
        return {
          dishes: state.dishes,
          comments: state.comments,
          promotions: state.promotions,
          leaders: state.leaders
        }
      }

function RenderItem(props) {
    const item = props.item;
        if (item != null) {
            return(
                <Card
                    featuredTitle={item.name}
                    featuredSubtitle={item.designation}
                    image={{uri: baseUrl + item.image}}>
                    <Text
                        style={{margin: 10}}>
                        {item.description}</Text>
                </Card>
            );
        }
}

class Home extends Component{
    constructor(props) {
        super(props);
        this.animatedValue = new Animated.Value(0);        
    }
    componentDidMount () {
        this.animate()
    }
    animate () {
        this.animatedValue.setValue(0)
        Animated.timing(
          this.animatedValue,
          {
            toValue: 8,
            duration: 8000,
            easing: Easing.linear
          }
        ).start(() => this.animate())
    }
    render() {

        const xpos1 = this.animatedValue.interpolate({
            inputRange:[0,1,3,5,8],
            outputRange:[1200 , 600 , 0 , -600 , -1200]
        });

        return(
            <View style = {{flex :1 , flexDirection:'row' , justifyContent : 'center'}}>
                <Animated.View style={{width :'100%' , tranform :[{translateX:xpos1}]}}>
                    <RenderItem item={this.props.dishes.dishes.filter((dish) => dish.featured)[0]}
                        isLoading={this.props.dishes.isLoading}
                        erreMess={this.props.dishes.erreMess} 
                    />
                </Animated.View>


            </View>

        );
    }
}

export default connect(mapStateToProps)(Home);

Я пытаюсь реализовать функцию animation.timing. Как упоминалось в документации, я написал функцию animation.timing с объявленной в конструкторе animatedValue. Но когда я написал функцию анимации, я получил следующую ошибку:

Я следовал документации по анимации реакции и пробовал все на inte rnet, чтобы решить проблему, но не смог.

Answer 1

Я пробовал это согласно вашей ссылке сделать c. Do c @ DrewReese

animate () {

    // this.animatedValue = useRef(new Animated.Value(0)).current;
    Animated.timing(
      this.state.animatedValue,
      {
        toValue: 8,
        duration: 8000,
        easing: Easing.linear
      }
    ).start()
}

, но все равно получаю ошибку.

Answer 2

Я думаю, вы можете просто захотеть l oop анимацию вместо попытки вручную "сбросить" время, что рекомендуется в документации.

l oop

Выполняет непрерывный цикл данной анимации, так что каждый раз, когда она достигает конца, она сбрасывается и начинается снова с начала.

constructor(props) {
  super(props);
  this.state = {
    animatedValue: new Animated.Value(0),
  } 
}

componentDidMount () {
  this.animate();
}

animate = () => {
  Animated.loop(
    Animated.timing(
      this.state.animatedValue,
      {
        useNativeDriver: true, // loop W/O blocking main JS thread
        toValue: 8,
        duration: 8000,
        easing: Easing.linear
      }
    ),
  ).start()
}