IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Utiliser React Navigation / pb sur createStackNavigator


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2021
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Août 2021
    Messages : 22
    Points : 19
    Points
    19
    Par défaut Utiliser React Navigation / pb sur createStackNavigator
    Bonjour,

    Je suis en train de m'auto-former à ReactNativ en suivant un tuto : "Développez une application mobile React Native"

    Pour naviguer d'une vue à une autre, il est proposé d'utiliser la librairie React Navigation. Pour ajouter React Navigation à notre projet j'ai utilisé la commande :
    npm install --save react-navigation
    J'ai bien pensé à arrêter le serveur, et l'installation s'est déroulée sans problème.

    Voici mon fichier Navigation

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // Navigation/Navigation.js
     
    import { createStackNavigator, createAppContainer } from 'react-navigation-stack'
    import Search from '../Components/Search'
    import FilmDetail from '../Components/FilmDetail'
     
    const SearchStackNavigator = createStackNavigator({
      Search: {
        screen: Search,
        navigationOptions: {
          title: 'Rechercher'
        }
      },
      FilmDetail: { // Encore une fois j'ai mis le même nom que celui du component mais libre à vous de choisir un nom différent
        screen: FilmDetail
      }
    })
     
    export default createAppContainer(SearchStackNavigator)
    mon fichier App :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import React from 'react'
    import Navigation from './Navigation/Navigation'
     
    export default class App extends React.Component {
      render() {
        return (
          <Navigation/>
        )
      }
    }
    A ce stade je devrais avoir un premier rendu du StackNavigator mais je me retrouve avec une erreur 500 sur mon téléphone et cette erreur dans ma fenêtre de navigation (j'utilise expo developper tools) :
    Error
    15:59
    Building JavaScript bundle: error
    Error
    15:59
    Unable to resolve module react-navigation-stack from C:\Users\Nicolas\Desktop\Ampère\ReactNative\MoviesAndMe\Navigation\Navigation.js: react-navigation-stack could not be found within the project.

    If you are sure the module exists, try these steps:
    1. Clear watchman watches: watchman watch-del-all
    2. Delete node_modules and run yarn install
    3. Reset Metro's cache: yarn start --reset-cache
    4. Remove the cache: rm -rf /tmp/metro-*
    1 | // Navigation/Navigation.js
    2 |
    > 3 | import { createStackNavigator, createAppContainer } from 'react-navigation-stack'
    | ^
    4 | import Search from '../Components/Search'
    5 | import FilmDetail from '../Components/FilmDetail'
    6 |
    J'ai tenté de bouger l'import de createAppContainer dans 'react-navigation'. Sans résultat.

    J'imagine que mon problème vient d'un soucis avec l'installation React Navigation mais je ne sais pas quoi faire.

    Par avance merci.

  2. #2
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2021
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Août 2021
    Messages : 22
    Points : 19
    Points
    19
    Par défaut
    J'ai tenté
    npm uninstall react-navigation
    puis
    npm install --save react-navigation
    Voici les warnings
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + react-navigation@4.4.4
    added 14 packages from 6 contributors and audited 992 packages in 16.725s

    28 packages are looking for funding
    run `npm fund` for details

    found 13 vulnerabilities (5 low, 8 moderate)
    run `npm audit fix` to fix them, or `npm audit` for details
    Même réaction que précédemment, mais au cas où ça inspire quelqu'un.

  3. #3
    Membre expérimenté
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Points : 1 333
    Points
    1 333
    Par défaut
    hello,

    c'est react-navigation-stack le package qui te manque. T'as essayé
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    npm i -S react-navigation-stack
    ?
    T'as quoi dans ton package.json?
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  4. #4
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2021
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Août 2021
    Messages : 22
    Points : 19
    Points
    19
    Par défaut
    Merci,

    J'ai fait ce que tu me conseilles.
    Il y a des info complémentaires ici : https://reactnavigation.org/docs/getting-started/

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment utilise-t-on ReadStr sur le port COM ?
    Par chourmo dans le forum Composants VCL
    Réponses: 4
    Dernier message: 17/06/2005, 19h00
  2. [Font] utiliser une même police sur Windows et sur Linux ?
    Par iubito dans le forum Interfaces Graphiques en Java
    Réponses: 6
    Dernier message: 10/05/2005, 17h41
  3. Utiliser un fichier XML sur un serveur FTP
    Par ired dans le forum Bases de données
    Réponses: 1
    Dernier message: 06/04/2005, 14h43
  4. Utilisation de l'ASP sur un serveur Apache
    Par 3adoula dans le forum Réseau
    Réponses: 1
    Dernier message: 29/10/2004, 15h34
  5. Utilisation d'une variable sur plusieurs unités
    Par Yamaneko dans le forum Langage
    Réponses: 2
    Dernier message: 05/06/2003, 12h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo