javascript - TypeError:Undefined is not an object 在 ReactNative 中尝试动画时
问题描述
我一周前才开始学习 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;
解决方案
我相信您没有正确导入依赖项-确保区分默认导出和命名导出,即
import Animated, { Value } from 'react-native-reanimated'
那么你会有例如
positionLeft: new Value(Dimensions.get("window").width)
请参阅此处了解 ES6 导入语法。
推荐阅读
- angular - Object(..) 不是函数
- c# - 剑道图的服务器端渲染
- firebase - 在谷歌云中的安全规则之后,cluase 在哪里不起作用
- ios - tvOS 上的 UISwipeGestureRecognizer 给了我一个 EXC_BAD_ACCESS
- javascript - React/Material-UI 如何导入 Slider 组件
- django - Django ORM 按多个字段计数
- java - 如何将 DSA 证书转换为 RSA 证书?
- php - 获取在简码函数内的不同函数中定义的变量
- jquery - 单击框外关闭框
- java - 自定义注解作为 JUnit 中的列表注入