我正在尝试使用Stacknavigator,此“ Search.js”和“ DetailFilm.js”上有2个组件我在组件Search.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
console.log(this.props)
我将_displayDetailForFilm()
更改为"Undefined is not an object (evaluating 'this.props')"
,将touchableopacity
更改为View
,在我的控制台上,当我获得onPress
时显示onStartShouldSetResponder
我在网上搜索,但未找到解决方案:(如果有人可以帮助请plz