类型错误：在 ReactNative 中尝试动画时未定义不是对象

Question

我一周前才开始学习 React Native，在这里我尝试将动画添加到从 TMDB api 搜索加载电影的应用程序中，它工作正常，但是在尝试动画时，在我按下搜索按钮后，它会显示和错误说： undefined is not an object (evaluating 'new _reactNativeReanimated.Animated.Value') * components\\FilmItem.js:18:17 in constructor
老实说，我在网上搜索过，但我没有发现类似的问题，所以有人可以帮忙吗？ 这是我的代码：

ps：在尝试动画之前，该应用程序运行良好，我在为动画添加的代码中添加了注释“ //>>> ”，还添加了一些屏幕
验证搜索前的搜索屏幕
错误画面

// Components/FilmItem.js

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  Dimensions
} from "react-native";
import { getImageFromApi } from "../Api/TMDBApi";
import { Animated } from "react-native-reanimated";

class FilmItem extends React.Component {
    //>>> added the constructor
  constructor(props) {
    super(props);
    this.state = {
      positionLeft: new Animated.Value(Dimensions.get("window").width)
    };
  }
//>>> added the componentDidMount()
  componentDidMount() {
    Animated.spring(
      this.state.positionLeft, {
        toValue: 0
    }).start()
  }

  _displayFavoriteImage() {
    if (this.props.isFilmFavorite) {

      return (
        <Image
          source={require("../images/icons8-heart-filled.png")}
          style={styles.favorite_image}
        />
      );
    }
  }

  render() {
    const film = this.props.film;
    const displayDetailForFilm = this.props.displayDetailForFilm;

    return (
        //>>> encapsulated the Touchable opacity inside a Animated.view with a style 
      <Animated.View style={{ left: this.state.positionLeft }}>
        <TouchableOpacity
          onPress={() => displayDetailForFilm(film.id)}
          style={styles.main_container}
        >
          <Image
            style={styles.image}
            source={{ uri: getImageFromApi(film.poster_path) }}
          />
          <View style={styles.content_container}>
            <View style={styles.header_container}>
              {this._displayFavoriteImage()}
              <Text style={styles.title_text}>{film.title}</Text>
              <Text style={styles.vote_text}>{film.vote_average}/10</Text>
            </View>
            <View style={styles.description_container}>
              <Text style={styles.description_text} numberOfLines={6}>
                {film.overview}
              </Text>
              {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
            </View>
            <View style={styles.date_container}>
              <Text style={styles.date_text}>Sorti le {film.release_date}</Text>
            </View>
          </View>
        </TouchableOpacity>
      </Animated.View>
    )
  }
}
const styles = StyleSheet.create({
  main_container: {
    height: 190,
    flexDirection: "row"
  },
  image: {
    width: 120,
    height: 180,
    margin: 5,
    backgroundColor: "gray"
  },
  content_container: {
    flex: 1,
    margin: 5
  },
  header_container: {
    flex: 3,
    flexDirection: "row"
  },
  title_text: {
    fontWeight: "bold",
    fontSize: 20,
    flex: 1,
    flexWrap: "wrap",
    paddingRight: 5
  },
  vote_text: {
    fontWeight: "bold",
    fontSize: 16,
    color: "#666666"
  },
  description_container: {
    flex: 7
  },
  description_text: {
    fontStyle: "italic",
    color: "#666666"
  },
  date_container: {
    flex: 1
  },
  date_text: {
    textAlign: "right",
    fontSize: 14
  },
  favorite_image: {
    width: 25,
    height: 25,
    marginRight: 5
  }
});

export default FilmItem;

Answer 1

我相信您没有正确导入您的依赖项 - 确保您区分默认导出和命名导出，即

import Animated, { Value } from 'react-native-reanimated'

那么你就会有例如

positionLeft: new Value(Dimensions.get("window").width)

请参阅此处了解 ES6 导入语法。