Bonjour,

Le lien en haut ne marche pas pour moi. Est-ce que c'est possible d'avoir le bon ?

Merci

Virginie

------

[Édit staff : Lien supprimé]

-
Edité par AbcAbc6 5 janvier 2021 à 17:34:24

Quel dommage que le cours ne soit pas à jour ! 

Je suis bloqué à cause de la maj de react navigation, ici : 

this.props.navigation.navigate("FilmDetail")

Cela ne veut plus de "Navigate" et j'ai ce message d'erreur :

The action 'NAVIGATE' with payload {"name":"FilmDetail"} was not handled by any navigator.

Quelqu'un s'en est sorti ? 

je pense que les imports sont différents entre react nav 4 et react nav 5.Perso, j'ai suivi quelques cours ailleurs(c'est pas facile pour un novice comme moi) pour essayer de comprendre. Regarde sur la doc. https://reactnavigation.org/docs/hello-react-navigation. J'espere t'avoir aidé

Bonjour

il me semble qu'il te manque l'ID du film à ouvrir. Voilà ce que j'ai de mon coté et qui fonctionne :

Bonjour à toute et à tous,

J'ai commencé à suivre le cours sur le framework React Active: https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/4915611-faites-vos-premiers-pas-avec-les-components-react

Tout d'abord merci pour ce cours, c'est le premier que j'ai décidé de vraiment suivre et c'est très bien expluqué 

Sauf que voila, il faut utiliser un émulateur pour voir le résultat. Quand j'essaye d'utiliser expo.io sur mon téléphone avec le QR Code, ça ne marche pas. Pourtant j'ai bien l'application, je scan bien avec l'appareil téléphone et je suis connecté sur le wi-fi mais ça charge jusqua me faire apparaître try again. 

Ducoup j'ai voulu essayé d'installer un émulateur android, mais la lorsque je lance mon programme depuis mon terminal, il me dis qu'il ne trouve pas de dbg. (Que j'ai pas pu configurer ducoup comme le montrait la doc expo) 

Si vous auriez une solution, je vous remercierai

Passez une bonne soirée !

Bonjour

L'option "Run in web browser" d'expo suffit amplement pour suivre les 3/4 du cours et voir son application fonctionner. 

L'installation d'Android Studio n'est utile que pour la dernière partie, qui traite des développements spécifiques au 'Device'.

Bonne journée

Philnoug a écrit:

Bonjour

L'option "Run in web browser" d'expo suffit amplement pour suivre les 3/4 du cours et voir son application fonctionner. 

L'installation d'Android Studio n'est utile que pour la dernière partie, qui traite des développements spécifiques au 'Device'.

Bonne journée

ReBonjour

Merci de votre réponse Philnoug. J'ai pu résoudre mon problème en passant mon réseau wifi de public à privé. Ducoup, j'ai pu utiliser expo io avec mon téléphone ! Peut-être qu'il étais dis dans le cours et que je ne l'ai pas vu en tout cas je laisse l'info peut être que d'autre en auront besoin !

bonjour je suis le cour qui est super bien fait vraiment il n'y a rien a pleindre mais dans la partie des navigaitons specialement avec la table navigation j'arrive pas a afficher les icons j'ai cherché un peu par tout sur le web mais sans succes alors pouvez-vous m'aidez stp?

voici la partie de mon code qui ne fonctionne pas dans le tuto tabBarIcon ne recoit pas de parametre mais il me retourne une erreur et marche quand je lui passe ces parametres mais l'icon n'apparait pas.

 Et je presise que la console.log est pour le debug mais quand je mets le return <Image ca marche pas.

const MoviesTabNavigation = createBottomTabNavigator(
{
  Search:{
    screen: SearchStackNavigator,
    navigationOptions: {
      showIcon: true,
      tabBarIcon: ({focused, tintColor, horizontal}) => {// On définit le rendu de nos icônes par les images récemment ajoutés au projet
        console.log(focused,
            tintColor,
            horizontal,
            require('../Images/ic_search.png'))
        //return <Image source={require('../Images/ic_search.png')} style={styles.icon}/> 
        // On applique un style pour les redimensionner comme il faut
      }
    }
  },

-
Edité par kenphiliboy 7 février 2021 à 18:44:31

Bonjour Kenphiliboy

Votre message manque un peu d'indices...

Vous être bloqué à quel chapitre et quel est le message d'erreur ?

Avez-vous essayé sans le passage de paramètres ?

-
Edité par Philnoug 8 février 2021 à 20:22:28

@Philnoug Bonjour, c'est bien d'aider, le faire dans les règles du forum c'est mieux. Merci d'utiliser le bouton code </> au dessus de la zone ou vous écrivez pour insérer votre code. Je vous laisse éditer votre message.

La modération.

Bonjour,

Je bloque à casiment la moitié du cours. Voilà à force de chercher des infos un peu partout sur stackoverflow etc je pense avoir touché quelques chose q'il fallais pas 

ReferenceError: Can't find variable: createStackNagivator
- node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
- node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportExc
eption
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleEx
ception

- node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleErr
or
- node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.se
tGlobalHandler$argument_0
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:293:29 in invoke
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:154:27 in invoke
- node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer- node_modules\react-native\Libraries\Core\Timers\JSTi
mers.js:181:14 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
- node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
- node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
- node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
- node_modules\react-native\Libraries\ReactNative\AppRegistry.js:200:6 in runApplication
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

J'ai la même erreur avec Search lorsque j'enlève tous mes éléments de Navigation. Je pense qu'il faudrait peut être réinstaller tous les package mais jai deja fait npm uninstall puis npm install

Bonjour

On dirait qu'il ne trouve pas createStackNavigator dans la liste de vos imports (que je  ne vois pas).

Vous importez bien createStackNavigator depuis le package 'react-navigation-stack' ?

Bonjour, Merci de la réponse rapide !

Philnoug a écrit:

Bonjour

On dirait qu'il ne trouve pas createStackNavigator dans la liste de vos imports (que je  ne vois pas).

Vous importez bien createStackNavigator depuis le package 'react-navigation-stack' ?

import { createStackNavigator, createAppContainer } from 'react-navigation-stack'
import Search from '../Components/Search.js'


const SearchStackNavigator = createStackNagivator({
  Search: {
    screen: Search,
    navigationOptions: {
      title: "Rechercher"
    }
  }
})

export default createAppContainer(SearchStackNavigator)

Voici mon code. Je me dis peut être tout réinstaller mais si à chaque problème je fais sa je vais pas m'en sortir

-
Edité par LeNiçoisduNord 9 février 2021 à 14:18:19

Il semble que les librairies ont été un peu réorganisées depuis que le cours existe. ça arrive souvent, il faut chercher un peu

Pour que ça fonctionne, moi j'ai dû faire ces imports là :   

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'

Bonjour, 

    Je suis le cours react-native du professeur maxime et c'est vraiment top. Cependant je rencontre un soucis avec la key de ma flatList

index.js:1 Warning: Encountered two children with the same key, `.$375142`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by View)
    in View (created by ScrollView)
    in div (created by View)
    in View (created by ForwardRef)
    in ForwardRef (created by ScrollView)
    in ScrollView (created by VirtualizedList)
    in VirtualizedList (created by FlatList)
    in FlatList (at Search.js:71)
    in div (created by View)
    in View (at Search.js:65)
    in Search (at App.js:8)
    in App (created by ExpoRootComponent)
    in ExpoRootComponent (created by RootComponent)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

Ma flatList

<FlatList
                    data = {this.state.films}
                    keyExtractor = {(item) => item.id.toString() }
                    renderItem={({item}) => <Text> <FilmItem film={item} /> </Text>}
                    onEndReachedThreshold={0.5}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => {
                        if (this.page < this.totalPages) { // On vérifie qu'on n'a pas atteint la fin de la pagination (totalPages) avant de charger plus d'éléments
                            this._loadFilms()
                        }
                    }}
                />

Des idées ??

Bonjour Hary

Pour le doublon d'ID de clé, je voyant pas la source de données, difficile à dire.

Mais il y a quelque chose de bizarre dans la déclaration de renderItem ; pourquoi l'encapsuler dans un 'Text' ? Cela peut créer une confusion sur l’objet qui va recevoir la clé, mais qui n'est pas celui qui en a besoin...

Je suis même étonné que ça fonctionne chez vous, car en faisant ça chez moi, ça ne fonctionne plus du tout :/ 

Bonne journée, bon code.

J'ai résolu le problème en faisant :  une concaténation 

keyExtractor = {(item) => item.id.toString()+'_'+item.title }




Pour l'encapsulation je n'ai pas d'erreur ça fonctionne chez moi.

Cependant je rencontre un autre problème de dans mes packages qui m'empêche d'évoluer dans mon apprentissage.

Attempted import error: 'createAppContainer' is not exported from 'react-navigation-stack'.
Some of your project's dependencies are not compatible with currently installed expo package version:
 - react-native-gesture-handler - expected version range: ~1.8.0 - actual version installed: ^1.10.0

Your project may not work correctly until you install the correct versions of the packages.

To install the correct versions of these packages, please run: expo install [package-name ...]

J'ai installé ce qui est demandé mais tjrs le même problème. 

-
Edité par hary potter 12 février 2021 à 18:53:01

@harypotter

Bonne idée que d'ajouter le titre dans la clé !

Pour le pb avec 'createAppContainer', il me semble que la réponse est plus haut dans ce thread...

Salut tout le monde,

Après avoir bloqué pendant deux jours sur la partie "concevez une navigation entre vos vues" pour réussir à lancer l'application avec expo, je viens de trouver les commandes qui m'ont permises de réaliser la première partie de ce cours.

Comme j'ai cherché absolument partout et j'ai jamais trouvé de réelle solution, je vous pose la solution ci-dessous. 

Tout d'abord, pensez à mettre à jours votre expo en tapant dans votre invité de commande node.js à la racine de votre projet:

npm install -g expo-cli

Puis installez react navigation avec la commande:

npm install --save react-navigation

Ensuite, pensez à installer le module"react navigation stack" que vous avez importé dans le répertoire "Navigation" avec la commande:

npm install --save react-navigation-stack

Enfin, pensez à installer le module gesture handler avec la commande:

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

Après avoir réalisé ces installations, vous pouvez relancer votre application avec "npm start". De mon côté, j'ai pu retrouver la modification du programme sur mon application mais en ayant tout de même le message

"Some of your project's dependencies are not compatible with currently installed expo package version:

 - react-native-gesture-handler - expected version range: ~1.8.0 - actual version installed: ^1.10.1

Your project may not work correctly until you install the correct versions of the packages.

To install the correct versions of these packages, please run: expo install [package-name ...]"

Pour l'instant cela fonctionne, à voir si ça va tenir dans le temps.

Pour ceux qui se demandent d'où vient le problème avec la navigation, c'est simplement parce que la version expo et des modules du cours n'est plus la même que celle d'aujourd'hui.

Ceux qui trouvent d'autres solutions plus fiables, je serai ravi que vous répondiez à ce message.

Merci à vous et bonne continuation sur react native

LéoJellimann : ça marche merci !

-
Edité par VincentDesbois 18 février 2021 à 16:02:41

je suis dans le chapitre des navigation avances ok et la partie que ne marche pas ca m'envoit toujours une erreur sur l'option tabbaricon qui prend 3 parametre et peu importe ce que je fais j'ai toujours la meme erreur

voici le code

const MoviesTabNavigation = createBottomTabNavigator(
{
  Search:{
    screen: SearchStackNavigator,
    navigationOptions: {
      showIcon: true,
      tabBarIcon: ({focused, tintColor, horizontal}) => {// On définit le rendu de nos icônes par les images récemment ajoutés au projet
        console.log(focused,
            tintColor,
            horizontal,
            require('../Images/ic_search.png'))
        //return <Image source={require('../Images/ic_search.png')} style={styles.icon}/>
        // On applique un style pour les redimensionner comme il faut
      }
    }
  },

ca me dit toujours qu'il y a un probleme dans l'option tabBarIcon

-
Edité par kenphiliboy 18 février 2021 à 23:30:31

Salut, je rencontre un soucis 

Error: Invalid sdkVersion. Valid options are 7.0.0, 8.0.0, 9.0.0, 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 26.0.0, 27.0.0, 28.0.0, 29.0.0, 30.0.0, 31.0.0, 32.0.0, 33.0.0, 34.0.0, 35.0.0, 36.0.0, 37.0.0, 38.0.0, 39.0.0, 40.0.0

j'ai essayé de faire un  $ expo update Mais j'ai des erreurs 

$ expo update 

Warning! Your git working tree is dirty. It's recommended to commit all your changes before proceeding, so you can revert the changes made by this command if necessary.

✔ Would you like to proceed? … yes

✔ This command works best on SDK 33 and higher. We can try updating for you, but you will likely need to follow up with the instructions from https://docs.expo.io/workflow/upgrading-expo-sdk-walkthrough/. Continue anyways? … yes

✔ You are currently using SDK 1.0.0. Would you like to update to the latest version, 40.0.0? … yes

✔ Would you like to upgrade the Expo app in the Android emulator? … yes

no devices connected The upgrade of your Android client didn't go as planned. You might have to reinstall it manually with expo client:install:android.

✖ Failed to install expo package with error: 

yarnpkg exited with non-zero code: 1 yarnpkg exited with non-zero code: 1 Error: 

yarnpkg exited with non-zero code: 1 at ChildProcess.completionListener 

(/usr/local/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:65:13) at Object.onceWrapper (events.js:422:26) at 

ChildProcess.emit (events.js:315:20) at maybeClose (internal/child_process.js:1048:16) at 

Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) ... at 

Object.spawnAsync [as default] 

(/usr/local/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:26:19) at 

YarnPackageManager._runAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:301:31) at 

YarnPackageManager.addAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:254:16) at 

upgradeAsync (/usr/local/lib/node_modules/expo-cli/src/commands/upgrade.ts:552:7) at /usr/local/lib/node_modules/expo-cli/src/commands/upgrade.ts:851:7 at 

Command. (/usr/local/lib/node_modules/expo-cli/src/exp.ts:346:7)

Des idées ??

-
Edité par hary potter 19 février 2021 à 13:42:44

Philnoug a écrit:

Bonjour Kenphiliboy

Votre message manque un peu d'indices...

Vous être bloqué à quel chapitre et quel est le message d'erreur ?

Avez-vous essayé sans le passage de paramètres ?

-
Edité par Philnoug 8 février 2021 à 20:22:28

a la ligne 7 pour l'option tabbaricon j'arrive pas a afficher les icones

@kenphiliboy Il y a un exemple d'utilisation du screenOptions ici : https://reactnavigation.org/docs/tab-based-navigation/ Hope it helps

Bonsoir, j'aimerai obtenir de l'aide.

En effet je suis le cours que je trouve très bien fait. Par contre depuis une semaine je patauge.

En effet pendant le chapitre qui concerne la navigation entre nos vue, après l'installation de Navigator et plusieurs lancement de tests, non fructueux , mon expo se plante avec le message suivant

Error: EMFILE: too many open files, watch

    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:178:28)

npmERR!code ELIFECYCLE

npmERR!errno 1

npmERR! @ start: `expo start`

npmERR! Exit status 1

npmERR!

npmERR! Failed at the @ start script.

npmERR! This is probably not a problem with npm. There is likely additional logging output above.

npmERR! A complete log of this run can be found in:

npmERR!     /Users/francoismasson/.npm/_logs/2021-02-24T17_46_41_129Z-debug.log

J'ai tout essayé. Réinstallation de Node.js et d'expo cli. Démarrage d'un nouveau projet etc...

Je ne vois plus comment faire. Je suis sur iOS.

Merci d'avance pour votre aide

François

@francoisMasson4

d'après Google il s'agit d'un problème avec 'watchman', qu'il faut réinstaller :

https://forums.expo.io/t/error-emfile-too-many-open-files/35564

c'est vrai que ce cours est très bien fait et j'espère que vous allez pouvoir en reprendre le fil. Sinon il y a l'option 'Run in WEB Browser' qui dépanne bien, tant que le cours de porte pas sur la partie vraiment native, propre aux OS des smartphones.

Bonne journée

@PHILNOUG

Merci, je teste ce soir en rentrant chez moi

François

J'ai trouve la solution au prblem du sdk, Cependant j'ai un autre soucis :

hary potter a écrit:

Salut, je rencontre un soucis 

Error: Invalid sdkVersion. Valid options are 7.0.0, 8.0.0, 9.0.0, 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 26.0.0, 27.0.0, 28.0.0, 29.0.0, 30.0.0, 31.0.0, 32.0.0, 33.0.0, 34.0.0, 35.0.0, 36.0.0, 37.0.0, 38.0.0, 39.0.0, 40.0.0

j'ai essayé de faire un  $ expo update Mais j'ai des erreurs 

$ expo update 

Warning! Your git working tree is dirty. It's recommended to commit all your changes before proceeding, so you can revert the changes made by this command if necessary.

✔ Would you like to proceed? … yes

✔ This command works best on SDK 33 and higher. We can try updating for you, but you will likely need to follow up with the instructions from https://docs.expo.io/workflow/upgrading-expo-sdk-walkthrough/. Continue anyways? … yes

✔ You are currently using SDK 1.0.0. Would you like to update to the latest version, 40.0.0? … yes

✔ Would you like to upgrade the Expo app in the Android emulator? … yes

no devices connected The upgrade of your Android client didn't go as planned. You might have to reinstall it manually with expo client:install:android.

✖ Failed to install expo package with error: 

yarnpkg exited with non-zero code: 1 yarnpkg exited with non-zero code: 1 Error: 

yarnpkg exited with non-zero code: 1 at ChildProcess.completionListener 

(/usr/local/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:65:13) at Object.onceWrapper (events.js:422:26) at 

ChildProcess.emit (events.js:315:20) at maybeClose (internal/child_process.js:1048:16) at 

Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) ... at 

Object.spawnAsync [as default] 

(/usr/local/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:26:19) at 

YarnPackageManager._runAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:301:31) at 

YarnPackageManager.addAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:254:16) at 

upgradeAsync (/usr/local/lib/node_modules/expo-cli/src/commands/upgrade.ts:552:7) at /usr/local/lib/node_modules/expo-cli/src/commands/upgrade.ts:851:7 at 

Command. (/usr/local/lib/node_modules/expo-cli/src/exp.ts:346:7)

Des idées ??

-
Edité par hary potter 19 février 2021 à 13:42:44

@philnoug

Bonsoir,

Je suis désolé de vous déranger encore mais je n'arrive pas à comprendre comment installer Watchman sur mon mac.

Je ne voudrais pas faire de bêtise. Pouvez vous me guider ?

Merci encore

François

@francoisMasson4: désolé mais je suis sur Chrome OS.