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