Partage
  • Partager sur Facebook
  • Partager sur Twitter

[REACT] probleme react navigation

    10 septembre 2020 à 15:39:24

    Bonjour, je suis à cette partie du cours https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues

    Je me retrouve avec un problème et une erreur sur mon device que je ne comprends pas.

    undefined Unable to resolve module react-navigation-stack from Navigation\Navigation.js: react-navigation-stack could not be found within the project.

    J'ai installer la nouvelle librairie, mon serveur node se lance, et je n'arrive pas à aller plus loin. Si vous avez besoin d'autre informations, dite moi.

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      12 septembre 2020 à 11:13:25

      Bonjour avez vous réussi a résoudre le problème je bloque au même endroit.
      • Partager sur Facebook
      • Partager sur Twitter
        12 septembre 2020 à 18:56:25

        Bonjour, pas encore, j'ai chercher sur stackoverflow, on m'a dit que le module n'étais pas bien installer... Je ne sais pas comment régler ce probleme sauf en ré-installant tout de zero

        • Partager sur Facebook
        • Partager sur Twitter
          13 septembre 2020 à 2:55:36

          Bonjour est-ce que tu peut nous posté le contenue du fichier concerné ( celui qui importe le react-navigation ).

          Si le composant et mal où pas installé ( puisque que node à pas l'air de le trouvé ).

          Tu peut essayé à la racine de ton projet dans un terminal de refaire un npm install pour ré installé / mettre à jour les dépendances.

          Vérifié que react-navigation et bien présent dans la clés dependencies du fichier package.json et

          sinon peut être supprimé le dossier node_modules et refaire un npm install pour ré installé toutes les dépendances.

          • Partager sur Facebook
          • Partager sur Twitter

          suggestion de présentation.

            15 septembre 2020 à 11:26:25

            Bonjour, je viens de créer un nouveau projet et installer le package navigation, j'ai encore le même problème, voici mon nouveau package.json : { "main": "node_modules/expo/AppEntry.js", "scripts": {

            "start": "expo start",
            "android": "expo start --android",
            "ios": "expo start --ios",
            "web": "expo start --web",
            "eject": "expo eject"
            

            }, "dependencies": {

            "expo": "~38.0.8",
            "expo-status-bar": "^1.0.2",
            "react": "~16.11.0",
            "react-dom": "~16.11.0",
            "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
            "react-native-web": "~0.11.7",
            "react-navigation": "^4.4.0"
            

            }, "devDependencies": {

            "@babel/core": "^7.8.6",
            "babel-preset-expo": "~8.1.0"
            

            }, "private": true }

            • Partager sur Facebook
            • Partager sur Twitter
              20 septembre 2020 à 23:59:22

              Bonjour je pense que le cours utilise une version "plus où moins vielle" de react-navigation ( le cours ne précise pas quelle version il utilise )

              mais la documentation pour la version que tu à installé ( 4.4.x ) ne fait pas les même import de composants que le cours.

              Tu peut voir l'exemple de la doc sur le hello world navigation de react navigation, il n'importe pas les composants de la même façon que le cours.

              Cela pourrait expliqué que nodejs n'arrive pas à résoudre les composants que tu essaye d'importé.

              Sur le sujet du cours react-native un utilisateur à réussit à se "calé" sur le cours en installant la version 3.0.6

              > npm install --save react-navigation@3.0.6

              mais cette version étant déprécié ( par ce qu'elle ne sera pas maintenu à long terme )

              je te conseille qu'à moitié cette solution.

              Sinon si tu es motivé tu peut essayé de prendre en mains la version la plus récente de react-navigation ( celle que tu as installé )

              en te servant de la documentation et éventuellement de ressources externe des tuto/cours.

              En tapant un truc comme: react navigation tuto/cours

              on trouve pas mal de ressource il faut essayé de faire attention à la date à la quelle elles sont publiés.

              -
              Edité par SamuelGaborieau3 21 septembre 2020 à 0:02:57

              • Partager sur Facebook
              • Partager sur Twitter

              suggestion de présentation.

                25 septembre 2020 à 17:17:37

                Hello, je suis également intéressé par une possible solution, c'est chiant de rester bloquer en plein milieu du cours...
                • Partager sur Facebook
                • Partager sur Twitter
                  21 octobre 2020 à 20:20:28

                  Salut ! Après bcp de tentatives j'ai testé le code de la doc mais ça ne fonctionnait pas jusqu'à ce que je tombe sur cette doc : https://reactnavigation.org/docs/troubleshooting/

                  un expo start -c et ça s'est lancé ! Après je suis juste au début du chapitre sur la navigation j'espere que ça tiendra.

                  -
                  Edité par MarineIncera 21 octobre 2020 à 20:21:08

                  • Partager sur Facebook
                  • Partager sur Twitter
                    22 octobre 2020 à 18:14:32

                    Bonjour,

                    J'ai suivi la documentation https://reactnavigation.org/docs/getting-started et cela fonctionne correctement maintenant.

                    Les étapes à suivre :

                    Dans la console :

                    1. Entrez : npminstall --save @react-navigation/native

                    2. Entrez : expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

                    3. Entrez : npminstall --save @react-navigation/stack

                    4. Dans votre fichier App.js, il faut ajouter import 'react-native-gesture-handler';


                    Pour exemple, voici mon fichier App.js


                    // App.js
                    
                    import 'react-native-gesture-handler';
                    
                    import React from 'react' //React Navigator
                    
                    import { NavigationContainer } from '@react-navigation/native';
                    
                    import { createStackNavigator } from '@react-navigation/stack';
                    
                    //Components
                    
                    import Search from './Components/Search'
                    
                    const Stack = createStackNavigator();
                    
                    export default class App extends React.Component {
                    
                    render()
                    
                    {
                    
                    return (
                    
                    <NavigationContainer>
                    
                          <Stack.Navigator>
                    
                                <Stack.Screen name="Rechercher" component={Search} />
                    
                          </Stack.Navigator>
                    
                    </NavigationContainer> )
                    
                    }
                    
                    }




                    5. Entrez : npm start pour relancer le projet

                    -
                    Edité par KillBill007 23 octobre 2020 à 12:05:48

                    • Partager sur Facebook
                    • Partager sur Twitter
                      22 octobre 2020 à 23:43:38

                      Salut,

                      tu as une balise code, ça facilite vraiment la lecture.

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Développeur freelance à Toulouse  - Création de site internet 

                      Je suis développeur web freelance spécialisé dans la création de site internet basé à Toulouse

                        8 novembre 2020 à 14:16:53

                        Bonjour à tous,

                        J'ai suivi le tutoriel de KillBill007 mais j'ai toujours le même message d'erreur :

                        TypeError: Cannot read property 'navigate' of undefined
                        Search._this._displayDetailForFilm
                        C:/Users/Utilisateur/Desktop/MoviesAndMe/Components/Search.js:69
                          66 |  }
                          67 | 
                          68 |  _displayDetailForFilm = (idFilm) => {
                        > 69 |    this.props.navigation.navigate("FilmDetail", { idFilm: idFilm })
                             | ^  70 |  }
                          71 | 
                          72 |  render() {
                        View compiled
                        onPress
                        C:/Users/Utilisateur/Desktop/MoviesAndMe/Components/FilmItem.js:14
                          11 | return (
                          12 |   <TouchableOpacity
                          13 |   style={styles.main_container}
                        > 14 |    onPress={() => displayDetailForFilm(film.id)}
                             | ^  15 |     style={styles.main_container}>
                          16 |     <Image
                          17 |       style={styles.image}
                        

                        -
                        Edité par connexion61 8 novembre 2020 à 14:17:30

                        • Partager sur Facebook
                        • Partager sur Twitter
                          31 août 2021 à 0:49:11 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code


                            10 octobre 2021 à 22:28:18

                            Pour ma part, j'ai supprimé Node_modules et tout ce qu'il contient, lancé un "npm install"

                            et finalement remplacé les imports par:

                            import { createAppContainer } from "react-navigation";
                            import { createStackNavigator } from "react-navigation-stack";



                            • Partager sur Facebook
                            • Partager sur Twitter

                            [REACT] probleme react navigation

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