Bonjour.

Je suis au chapitre "Concevez une navigation entre vos vues" du cours "Développez une application mobile React Native". Il m'est impossible de continuer à cause de multiples erreurs provenant de l'installation de dépendances liées à react-navigation.

Après avoir entré dans le Terminal la commande :

sudo npm install --save react-navigation

Puis la commande :

sudo npm install

J'ai eu l'erreur suivante sur le simulator iOS:

Unable do resolve module "react-navigation-stack"

J'ai donc essayé d'entrer la commande :

sudo npm install --save react-navigation-stack

Et là, nouvelle erreur :

Unable to resolve module "react-native-gesture-handler"

Du coup, j'essaye :

sudo npm install --save react-native-gesture-handler

Et maintenant :

Unable to resolve module "@react-native-community/masked-view"

Je commence à me dire que je fais fausse route ;). Est-ce que quelqu'un a la solution pour ce cours ?

Voici où j'en suis au niveau du code pour cette partie :

App.js :

import React from "react"
import Navigation from "./Navigation/Navigation"

export default class App extends React.Component {
  render() {
    return (
      <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)

Merci!

-
Edité par VasteBikini 15 septembre 2020 à 10:27:12

Bonjour,

Il semble via les messages d'erreur que les modules ne sont pas correctement installé et donc le simulateur n'arrive pas à les charger

Est-ce que tu as essayé de suivre la démarche de la doc officielle de react navigation ? Il y a quelques commandes npm à saisir pour effectuer l'installation correctement des modules qu'il te manque

https://reactnavigation.org/docs/getting-started

La doc de react-navigation-stack peu aussi être utile

https://www.npmjs.com/package/react-navigation-stack

N'hésite pas à nous prévenir si tu as réussi à résoudre ton probleme

-
Edité par Moht_ 15 septembre 2020 à 15:06:59

Salut,

Effectivement, c'était bien ça le problème. Merci beaucoup pour ton aide !

Pour info, j'ai suivi les instructions de ton premier lien:

https://reactnavigation.org/docs/getting-started/

J'ai tapé dans le terminal la commande :

sudo npm install @react-navigation/native

Et ensuite comme le projet est géré par Expo :

sudo expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Et maintenant tout fonctionne. Dommage que les commandes indiquées dans le cours ne fonctionnent pas (j'avais déjà eu du mal dès les premiers chapitres pour l'installation d'Expo mais en fouillant sur le web, ça avait fini par fonctionner). Peut-être n'est-il pas à jour ?

Edit:

J'ai également changé les imports de mon fichier Navigation.js :

import { createAppContainer } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"
import Search from "../Components/Search"

-
Edité par VasteBikini 17 septembre 2020 à 11:37:41

Salut, je me permets de poster ici, car j'ai exactement le même soucis.
J'ai regardé la même doc que les liens dans les précédents posts, mais rien ne fonctionne, j'ai toujours cette erreur.
J'ai tenter de supprimer/réinstaller node module.
De reset le cache.
Rien n'y fait ça fait deux heures que je suis dessus je suis complètement bloqué.

Salut à tous,

J'ai eu le même problème que VasteBikini.

En suivant la procédure d'install c'est Ok pour moi et je confirme qu'il faut modifier le fichier Navigation.js comme il a fait sinon cela ne marche pas.

import { createAppContainer } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"
import Search from "../Components/Search"

-
Edité par Guedin78 4 mars 2021 à 17:29:28

Je suis également ce cours de react native, et je suis également bloqué au même endroit sur la librairie react navigation. J'ai utilisé toutes les solutions proposées dans le forum mais rien ne marche. J'espère trouver une aide provenant de votre part. Merci d'avance. Voici une des solutions proposée que j'ai essayée mais qui ne marche toujours pas:

import 'react-native-gesture-handler';

import * as React from 'react';

 

import { NavigationContainer } from '@react-navigation/native';

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

 

import Search from '../Component/Search'

import FilmItem from '../Component/FilmItem'

 

const Stack = createStackNavigator();

 

export default function App() {

  return(

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen name="Search" component={Search}/>

        <Stack.Screen name="FilmDetail" component={FilmItem}/>

      </Stack.Navigator>

    </NavigationContainer>

    )

}

Lorsque j'enregistre, j' ai ce message d'erreur qui s'affiche sur mon terminale. Voir l'image insérée au dessus

-
Edité par LoutezamoAbeille 21 mai 2021 à 22:44:28

Bonjour j'ai eu le même souci. React Navigation a beaucoup évolué, en ce moment la version stable est la version 5.x. J'ai regardé un peu dans la documentation. Voici ce que j'ai fait et ça marche !

J'ai d'abord installé la dernière version de react-navigation comme ceci

npm install --save @react-navigation/native @react-navigation/stack

Si vous utilisez Expo faites ceci pour mettre à jour les dépendances 

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

Après j'ai mis à jour mon fichier Navigation.js comme ceci

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Search from '../Components/Search';

const Stack = createStackNavigator();

export default function Navigation(){
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                name="Search"
                component={Search}
                options={{ title: 'Rechercher' }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

Et enfin mon fichier App.js comme ceci 

import 'react-native-gesture-handler';
import React from 'react';
import Navigation from './Navigation/Navigation';

export default function App() {
  return (
    <Navigation />
  );
}

Redémarrer votre serveur et ce sera bon ! 

npm start

-
Edité par linkhousni 6 juillet 2021 à 9:58:22