Partage
  • Partager sur Facebook
  • Partager sur Twitter

[ReactNative] Envoie de données entre deux pages

Sous react navigation

    17 février 2020 à 19:09:34

    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 :)


    • Partager sur Facebook
    • Partager sur Twitter
      18 février 2020 à 2:53:28

      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.

      • Partager sur Facebook
      • Partager sur Twitter
        18 février 2020 à 9:53:17

        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 :)

        • Partager sur Facebook
        • Partager sur Twitter
          18 février 2020 à 17:56:18

          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)

          • Partager sur Facebook
          • Partager sur Twitter
            19 février 2020 à 10:16:40

            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...

            • Partager sur Facebook
            • Partager sur Twitter
              19 février 2020 à 21:13:38

              On peut voir le code de ta classe FilmDetail ?
              • Partager sur Facebook
              • Partager sur Twitter
                20 février 2020 à 10:06:56


                // 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> ) } }
                Voilà le code (sans le style) merci encore de ton aide
                • Partager sur Facebook
                • Partager sur Twitter
                  20 février 2020 à 18:40:14

                  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 => {})



                  • Partager sur Facebook
                  • Partager sur Twitter

                  [ReactNative] Envoie de données entre deux pages

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown