[英]TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate') reactNavigation 5
I'm trying to change the view from my search.js file.我正在尝试从我的 search.js 文件中更改视图。 but I can't and I encounter this error in my app that crashes.
但我不能,而且我在崩溃的应用程序中遇到了这个错误。 And every time I do a console.log(this.props) in my search.js file I get this result: ------------------------------------opooi- Object {}.
每次我在我的 search.js 文件中执行 console.log(this.props) 时,我都会得到这个结果: ------------------------- -----------opooi-Object {}。
This is my Search.js file这是我的 Search.js 文件
//Components/Search.js
import React from 'react'
import { StyleSheet, View, TextInput, Button, Text, FlatList, ActivityIndicator } from 'react-native'
import FilmItem from './FilmItems'
import { getFilmsFromApiWithSearchedText } from '../API/TMDBApi'
class Search extends React.Component {
_displayDetailForFilm = (idFilm) => {
//console.log("Display film with id " + idFilm + this )
console.log('----------------------opooi-')
console.log(this.props)
// Cette commande ci-dessous est non fonctionnel donc si vous avez la solution...
this.props.navigation.navigate("Details")
}
constructor(props) {
super(props)
this.page = 0
this.totalPages = 0
this.searchedText = "" // Initialisation de notre donnée searchedText en dehors du state
this.state = {
films: [],
isLoading : false // Affiche temoin de chargement desactiver de base
}
}
_loadFilms() {
this.setState({ isLoading: true})
if (this.searchedText.length > 0) { // Seulement si le texte recherché n'est pas vide
getFilmsFromApiWithSearchedText(this.searchedText, this.page+1).then(data => {
this.page = data.page
this.totalPages = data.total_pages
this.setState({
films: [...this.state.films , ...data.results ],
isLoading : false
})
})
}
}
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
{/* Le component ActivityIndicator possède une propriété size pour définir la taille du visuel de chargement : small ou large. Par défaut size vaut small, on met donc large pour que le chargement soit bien visible */}
</View>
)
}
}
_searchFilms() {
this.page = 0
this.totalPages = 0
this.setState({
films: []
}, ()=> {
// J'utilise la paramètre length sur mon tableau de films pour vérifier qu'il y a bien 0 film
console.log("Page : " + this.page + " / TotalPages : " + this.totalPages + " / Nombre de films : " + this.state.films.length)
this._loadFilms()
})
}
_searchTextInputChanged(text) {
this.searchedText = text // Modification du texte recherché à chaque saisie de texte, sans passer par le setState comme avant
}
render() {
const { film, displayDetailForFilm } = this.props
console.log('----------------------------')
console.log(this.props);
// test si lóbject this.props est null..
return (
<View
style={styles.main_container}
onPress={() => displayDetailForFilm(film.id)}
>
<TextInput
style={styles.textinput}
placeholder='Titre du film'
onChangeText={(text) => this._searchTextInputChanged(text)}
onSubmitEditing={() => this._searchFilms()}
/>
<Button title='Rechercher' onPress={() => this._searchFilms()}/>
<FlatList
data={this.state.films}
keyExtractor={(item) => item.id.toString()}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (this.page < this.totalPages) {
this._loadFilms()
}
}}
This is my Navigation.js file这是我的 Navigation.js 文件
// Navigation/Navigation.js
import * as React from 'react';
import Search from '../Components/Search';
import FilmDetail from '../Components/FilmDetail';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const HomeScreen =({ navigation }) => {
return (
<Search/>
);
}
const DetailsScreen = ({ navigation }) => {
return (
<FilmDetail/>
);
}
function Navigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
<Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default Navigation;
Here is my Filmitem.js file where I use TouchableOpacity这是我使用 TouchableOpacity 的 Filmitem.js 文件
// Components/FilmItem.js
import React from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import { getImageFromApi } from '../API/TMDBApi'
class FilmItem extends React.Component {
render() {
const film = this.props.film
const displayDetailForFilm = this.props.displayDetailForFilm
return (
<TouchableOpacity
style={styles.main_container}
onPress={() => displayDetailForFilm(film.id)}>
<Image
style={styles.image}
source={{uri: getImageFromApi(film.poster_path)}}
/>
<View style={styles.content_container}>
<View style={styles.header_container}>
<Text style={styles.title_text}>{film.title}</Text>
<Text style={styles.vote_text}>{film.vote_average}</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}>{film.release_date}</Text>
</View>
</View>
</TouchableOpacity>
)
}
}
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,
color: '#FFFFFF'
},
vote_text: {
fontWeight: 'bold',
fontSize: 26,
color: '#FFFFFF'
},
description_container: {
flex: 7
},
description_text: {
fontStyle: 'italic',
color: '#FFFFFF'
},
date_container: {
flex: 1
},
date_text: {
textAlign: 'right',
fontSize: 14,
color: '#FFFFFF'
}
})
export default FilmItem
Here's the view I'm trying to access这是我试图访问的视图
// Components/FilmDetail.js
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
class FilmDetail extends React.Component {
render() {
return (
<View style={styles.main_container}>
<Text>Détail du film</Text>
<Button
title={`Go to ${Home}`}
onPress={() => navigation.navigate(Home)}
/>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
}
})
export default FilmDetail
The error tells you what you need to know错误告诉你你需要知道什么
Undefined is not an object (evaluating '_this.props.navigation.navigate')
未定义不是 object(评估 '_this.props.navigation.navigate')
It's referring to this line.它指的是这条线。
this.props.navigation.navigate("Details")
Obviously this.props
is an object, but this.props.navigation
is not, so this.props.navigation.navigate
will fail to evaluate.显然
this.props
是一个 object,但this.props.navigation
不是,所以this.props.navigation.navigate
将无法评估。 The reason why this.props.navigation
is undefined
is because you didn't pass a navigation
prop to your component. this.props.navigation
undefined
的原因是您没有将navigation
道具传递给组件。
const HomeScreen =({ navigation }) => {
return (
<Search/>
);
}
Here you've defined a HomeScreen
component that is receiving a navigation
prop, but the error you're getting is in your Search
component which does not have that prop.在这里,您定义了一个接收
navigation
道具的HomeScreen
组件,但您遇到的错误是在没有该道具的Search
组件中。 You can simply pass it in:您可以简单地将其传入:
const HomeScreen =({ navigation }) => {
return (
<Search navigation={navigation}/>
);
}
...or if your component is really that simple, you can do: ...或者如果您的组件真的那么简单,您可以这样做:
const HomeScreen = Search;
...and let Stack.Navigator
pass the navigation
prop directly into your Search
component. ...并让
Stack.Navigator
将navigation
道具直接传递到您的Search
组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.