Сагар
I followed all the steps in order as you told, but React Navigation still doesn´t work.
Here is my App code :
// App.js
import React from 'react'
import Navigation from './Navigation/Navigation'
export default class App extends React.Component {
render() {
return (
<Navigation/>
)
}
}
// Navigation/Navigation.js
import { createStackNavigator, createAppContainer } from 'react-navigation-stack'
import Search from '../Components/Search'
const SearchStackNavigator = createStackNavigator({
Search: {
screen: Search,
navigationOptions: {
title: 'Rechercher'
}
}
})
export default createAppContainer(SearchStackNavigator)
// Components/Search.js
import React from 'react'
import { StyleSheet, View, TextInput, Button, Text, FlatList, ActivityIndicator } from 'react-native'
import FilmItem from './FilmItem'
import { getFilmsFromApiWithSearchedText } from '../API/TMDBApi'
//Class Search/custome component
class Search extends React.Component {
constructor(props) {
super(props)
this.searchedText = ""
//initialise la page
this.page = 0
//initialise le nbr total des pages
this.totalPages = 0
this.state = {
films: [],
//gestion du boutton loading/boutton de charchement.
isLoading: false
}
}
_loadFilms() {
if (this.searchedText.length > 0) {
this.setState({ isLoading: true })
//recup. tous les films correspendant au text tapé et incrinmente/ajoute une page achaque fois que le scroll est egale á 0.5
getFilmsFromApiWithSearchedText(this.searchedText, this.page+1).then(data => {
this.page = data.page
this.totalPages = data.total_pages
this.setState({
//syntaxe E6 cici permet de creer une copie de chaque objet.Une copie de tableau de film deja recup,
//et une copie des nouveaux films recup. de l´API
films: [ ...this.state.films, ...data.results ],
isLoading: false
})
})
}
}
_searchTextInputChanged(text) {
this.searchedText = text
}
_searchFilms() {
this.page = 0
this.totalPages = 0
this.setState({
films: [],
}, () => {
//vider le tab films
this._loadFilms()
})
}
//fonction pour gerer le bouton de chargement
_displayLoading() {
if (this.state.isLoading) {//si les films sont en cours de chargement affiche le bouton d´animation
return (
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
</View>
)
}
}
render() {
return (
<View style={styles.main_container}>
<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()}
renderItem={({item}) => <FilmItem film={item}/>}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (this.page < this.totalPages) {
this._loadFilms()
}
}}
/>
{this._displayLoading()}
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
marginTop: 20
},
textinput: {
marginLeft: 5,
marginRight: 5,
height: 50,
borderColor: '#000000',
borderWidth: 1,
paddingLeft: 5
},
loading_container: {
position: 'absolute',
left: 0,
right: 0,
top: 100,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
})
export default Search
// Components/FilmItem.js
import React from 'react'
import { StyleSheet, View, Text, Image } from 'react-native'
import { getImageFromApi } from '../API/TMDBApi'
class FilmItem extends React.Component {
render() {
const film = this.props.film
//console.log(this.props);
return (
<View style={styles.main_container}>
<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>
</View>
<View style={styles.date_container}>
<Text style={styles.date_text}>Sorti le {film.release_date}</Text>
</View>
</View>
</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: 26,
color: '#666666'
},
description_container: {
flex: 7
},
description_text: {
fontStyle: 'italic',
color: '#666666'
},
date_container: {
flex: 1
},
date_text: {
textAlign: 'right',
fontSize: 14
}
})
export default FilmItem
// API/TMDBApi.js
const API_TOKEN = "*******************";
export function getFilmsFromApiWithSearchedText (text, page) {
const url = 'https://api.themoviedb.org/3/search/movie?api_key=' + API_TOKEN +
'&language=fr&query=' + text + "&page=" + page
return fetch(url)
.then((response) => response.json())
.catch((error) => console.error(error))
}
export function getImageFromApi (name) {
return 'https://image.tmdb.org/t/p/w300' + name
}