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

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

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.

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 }

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

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

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

Salut,

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

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

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";