Salut tout le monde !

Je suis le tutoriel https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native?status=published mais apparemment la bibliothèque react navigation ne fonctionne plus tout à fait pareil. J'essaie donc de développer un menu Stack dans un menu Tab (ci-dessous mon fichier Navigation.js adapté à la nouvelle librairie):

// Navigation/Navigation.js
import * as React from 'react';
import { createAppContainer } from 'react-navigation'
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Search from '../Components/Search'
import FilmDetail from '../Components/FilmDetail'
import Favorites from '../Components/Favorites'



import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Search" component={Search} />
      <Stack.Screen name="FilmDetail" component={FilmDetail}   initialParams={{ itemId: 42 }} />
    </Stack.Navigator>
  );
}


const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="MyStack" component={MyStack} />
        <Tab.Screen name="Favorites" component={Favorites} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Depuis la page Search, j'envoie donc ça :

    console.log("Display film with id " + idFilm)
    this.props.navigation.navigate('FilmDetail', {idFilm: idFilm})

Le log affiche bien le bon idFilm et je sais que la seconde ligne appelle bien la page FilmDetail puisque quand je change la page je n'ai pas la même chose.

Le problème est que sur ma page FilmDetail, il manque l'iDfilm dans ce que je reçois de la navigation (j'ai affiché les logs). Je me demande pourquoi du coup étant donné que je la met bien en paramètres. J'ai regardé la documentation react-navigation et en suivant leur manière de faire j'ai le même problème.

N'hésitez pas à me dire s'il manque la moindre information et bonne soirée à tout le monde

Comment as-tu récupérer le idFilm dans ta classe FilmDetail ?

const FilmDetail = ({ navigation, idFilm }) => {
}

Normalement ça doit fonctionner comme ça puisque tu passe l'id explicitement depuis la fonction navigate.

Salut,

J'ai suivi ce tutoriel : https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues et en gros de ce que j'ai compris, l'idFilm devrait être dans this.props.navigation juste après le render sauf que dans mon cas, quand je fais un console.log(this.props.navigation), je n'ai aucune propriété idFilm justement. Peut-être qu'il y a quelque chose que je n'ai pas saisi

Merci de ta réponse en tous cas

Dans les versions  4 et 5 de React Navigation pour avoir les données passées en paramètres tu fais navigation.state.params

(this.props.navigation.state.params dans ton cas)

Salut,

c'est justement ce que je fais et quand je fais un console.log de ça, je n'ai aucun paramètres il est undefines donc si j'affiche finalement un console.log(this.props.navigation.state), j'obtiens aussi un undefiend. En fait j'ai l'impression que les paramètres ne s'envoient pas et je comprends pas pourquoi...

// Components/FilmDetail.js

import React from 'react'
import { StyleSheet, View, Text, ActivityIndicator, ScrollView, Image } from 'react-native'
import { getFilmDetailFromApi, getImageFromApi } from '../API/TMDBApi'
import moment from 'moment'
import numeral from 'numeral'


class FilmDetail extends React.Component {
  
  constructor(props) {
    super(props)
    this.state = {
      film: undefined,
      isLoading: true
    }
  }

  componentDidMount() {
    console.log("Test")
    console.log(this.props.navigation.state)
    getFilmDetailFromApi(this.props.navigation.state.params).then(data => {
      this.setState({
        film: data,
        isLoading: false
      })
    })
  }

  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
        </View>
      )
    }
  }

  _displayFilm() {
    const { film } = this.state
    if (film != undefined) {
      return (
        <ScrollView style={styles.scrollview_container}>
          <Image
            style={styles.image}
            source={{uri: getImageFromApi(film.backdrop_path)}}
          />
          <Text style={styles.title_text}>{film.title}</Text>
          <Text style={styles.description_text}>{film.overview}</Text>
          <Text style={styles.default_text}>Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}</Text>
          <Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
          <Text style={styles.default_text}>Nombre de votes : {film.vote_count}</Text>
          <Text style={styles.default_text}>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
          <Text style={styles.default_text}>Genre(s) : {film.genres.map(function(genre){
              return genre.name;
            }).join(" / ")}
          </Text>
          <Text style={styles.default_text}>Companie(s) : {film.production_companies.map(function(company){
              return company.name;
            }).join(" / ")}
          </Text>
        </ScrollView>
      )
    }
  }

  render() {
    return (
     /* console.log(this.props.route.params?.itemId),
      console.log(this.state),
      console.log(this.props.navigation.state),*/
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayFilm()}
      </View>
    )
  }
}

En se rendant dans la doc on découvre que tes paramètres se trouvent dans props.route:

getFilmDetailFromApi(this.props.route.params.id).then(data => {})