Я пытаюсь использовать Stacknavigator, есть два компонента для этого "Поиск. js" и "DetailFilm. js" У меня есть этот код в моем компоненте Поиск. js
import React from 'react';
import FilmItem from './FilmItem';
import films from '../Helpers/filmData';
import { getFilm } from '../API/TMDBApi';
import { StyleSheet, Text, View, Button, TextInput, FlatList, ActivityIndicator } from 'react-native';
class Search extends React.Component{
constructor(props){
super(props)
this.state = {
films: [],
isLoading: false
}
this.page = 0
this.totalPage = 0
this.searchedText = ''
}
_displayLoading(){
if(this.state.isLoading){
return(
<View style={styles.loading_container}>
<ActivityIndicator size="large" color="purple"/>
</View>
)
}
}
_loadFilms(){
this.setState({
isLoading: true
})
if(this.searchedText.length > 0){
getFilm(this.searchedText, this.page+1).then((data) => {
this.page = data.page
this.totalPage = data.total_pages
this.setState({
films: [...this.state.films, ...data.results],
isLoading: false
})
})
}
}
_searchFilms(){
this.page = 0
this.totalPage = 0
this.setState({
films: []
},() => {
this._loadFilms()
})
}
_searchInputText(text){
this.searchedText = text
}
_displayDetailForFilm(idFilm){
console.log("idFilm: "+idFilm)
console.log(this.props)
}
render(){
console.log(this.state.isLoading)
// console.log(this.props)
return(
<View style={styles.container}>
<TextInput onSubmitEditing={() => this._searchFilms()} onChangeText={(text) => this._searchInputText(text)} style={ styles.inputStyle } placeholder="Titre du film" />
<Button style={styles.btnStyle} title="Rechercher" onPress= {() => this._searchFilms()}/>
<FlatList
data={this.state.films}
onEndReachedThreshold={0.5}
onEndReached={() => {
if(this.state.films.length > 0 && this.page < this.totalPage){
this._loadFilms()
}
}}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm} />}
/>
{this._displayLoading()}
</View>
)
}
}
и функция _displayDetailForFilm отправляется как реквизиты "displayDetailForFilm" другому компоненту, который "FilmItem. js"
class FilmItem extends React.Component{
constructor(props){
super(props)
}
render(){
// const film = this.props.film
// const detail = this.props.displayDetailForFilm
const { film, displayDetailForFilm } = this.props
return(
<View onStartShouldSetResponder={() => displayDetailForFilm(film.id)} style={styles.container}>
<Image
style={styles.film_pic}
source={
{uri: getImageFromApi(film.poster_path)}
}
/>
<View style={styles.film_info}>
<View style={styles.title_vote}>
<Text style={styles.film_title}>{film.title}</Text>
<Text style={styles.film_vote}>{film.vote_average}</Text>
</View>
<View style={styles.film_description}>
<Text style={styles.film_detail} numberOfLines={6}>{film.overview}</Text>
</View>
<View style={styles.film_date}>
<Text style={styles.film_date_detail} >Sorti le {film.release_date}</Text>
</View>
</View>
</View>
)
}
}
Есть функция поиска по фильму, это хорошо работает, но я хочу сделать такую функциональность, как «больше информации о фильме», которая представлена функцией _displayDetailForFilm, эта функция используется при нажатии на одну из данных (в компоненте FilmItem ), до View я использовал touchableopacity
Итак, когда нажата touchableopacity, на моей консоли я получаю idFilm, а console.log в моем рендере при поиске. js показывает реквизиты в моей консоли, но когда я добавляю console.log(this.props) в моей функции _displayDetailForFilm(), это возвращает эту ошибку при нажатии touchableopacity: "Undefined is not an object (evaluating 'this.props')" Я изменил touchableopacity на View, а также onPress на onStartShouldSetResponder и на моей консоли после того, как я получу id как undefined Я искал на net, но не нашел решения :( если кто-то может помочь, плз