je commence à peine le tutoriel, que je me retrouve face à une impasse.
Déjà dans le tutoriel il est écrit que l'on devrait se retrouver avec ce code-ci :
//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Sauf que moi, je me retrouve avec ce code-ci :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
La différence est au niveau de "export default function App()..."
Et quand j'essais de mettre comme dans le cours, l'élément "Component" de "React.Component" est orange/rouge. Et j'ai des messages d'erreurs lorsque je regarde mon émulateur...
Je suis un peu perdu et j'ignore pourquoi je ne me retrouve pas avec le même texte.
Merci de votre aide !
Tu es sur que tu utilises exactement le même code que dans le cours ?
Dans ton code cité tu as créé une fonction, qui ne peut pas étendre React.Component (extends React.Component). Dans le cours c'est une classe
export default class App extends React.Component {
Est-ce que tu as aussi le souci quand tu copies colles le code du helloWorld du site react native ?
je viens de commencer le cours de React Native, mais comme je suis novice en développement je pense que quelqu'un d'entre vous peut m'aider à comprendre ce bout de code:
En effet, quand j'ai checké un peu sur le net je vois fetch avec deux .then imbriqués et dans le code ci-dessous je vois un appel de fonction avec un then à la suite. je me sens un peu perdu, pouvez-vous s'il vous plait m'éclaircir. c'est surtout la syntaxe de ce bout de code qui me rend fou lol
Merci
On peut illustrer ce code de la manière suivante :
J'appelle la méthode getFilmsFromApiWithSearchedText avec le paramètre "star". Si aucune erreur ne se produit lors de l'execution de cette méthode, je place le résultat dans une variable qui se nomme 'data'. A partir de ce résultat, j'execute le code suivant :
console.log(data);
Donc en une ligne, tu executes une méthode et tu affiches son résultat
Mais si ça plante... Tu ne fais rien.
PS: Openclassrooms qui limite les utilisateurs à 1 seul post par jour, je te zut
Salut, ce n'est pas une erreur se sont des Warns, et la plupart sont là pour que tu installes des peer dependencies, rien de très important. Après si ça t'embête vraiment tu peux toujours installer peerdeps avec la commande : npm install -g --save install-peerdeps (https://www.npmjs.com/package/install-peerdeps) qui te permet d'installer les dependencies de chacun de tes modules.
Exemple, si tu fais : npm install --save react-redux Il va t'afficher des warn pour peer dependencies, tu peux donc faire juste après : install-peerdeps react-redux.
Pour aller plus vite, mets les deux commandes sur une seul ligne et tu les sépares d'un ';' ton shell exécutera ainsi les 2 cmds à la suite.
Salut j'ai commencé le cours il y a quelques jours jusque la tout va bien mais la je suis coincé :/
J'en suis au cours avant le deuxieme quiz et ma flatlist a un sérieux problème, dés que l'on scroll beaucoup ça devient n'importe quoi avec des films qui se dupliquent et des messages en rouge sur mon terminal qui me disent que en gros il y a des key similaire, dupliqué, comme le soucis qu l'on avait réglé au début avec le key extractor, sauf que la ça me met des 100000000 d'erreur jaune sur mon tel et pareil en rouge sur le terminale ...
J'ai fini par copier-coller le code complet de Search.js donné à la fin carr je ne trouvais pas l'erreur, mais ça n'a pas résolu le problème...
Merci d'avance pour vos réponses!
- Edité par RaphaelClisson2 29 décembre 2019 à 17:00:16
Je me permets de vous demander de l'aide car j'ai également le même problème que Raphael. Tout fonctionne avec mon code sauf qu'après avoir scrollé et charger 5-6 pages de ma FlatList de films, j'arrive avec plusieurs films qui ont la même key ("Encountered two children with the same key. Keys should be unique (...)")
Le même problème survient en prenant exactement le code du cours également.
Quelqu'un aurait des suggestions pour régler ce problème ?
je suis le cours depuis 2-3 jours, tout se passait bien et puis une fois arrivé au chapitre sur react-navigation, ca n'allait plus.
tout d'abord quand j'ai commencé a installer react-navigation tout n'a pas été télecharger.
J'ai du instal en plus :
react-native-gesture-handler
react-navigation-stack
react-native-safe-area-context@0.6.0 ( la dernière version levait un warning)
et @react-native-community/masked-view@0.1.5 ( la dernière version levait un warning)
J'ai pu afficher correctement le stack-navigator.
Mais quand j'ai voulu naviguer, il ne s'est passé.
c'est comme je n'appelais pas FilmDetail.
Je vous donne ici mon code.
// Navigation/Navigation.js
// import { createStackNavigator, createAppContainer } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import Search from "../Components/Search.js"
import FilmDetail from "../Components/FilmDetail.js"
const SearchStackNavigator = createStackNavigator({
Search: { // Ici j'ai appelé la vue "Search" mais on peut mettre ce que l'on veut. C'est le nom qu'on utilisera pour appeler cette vue
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)
// Components/FilmDetail.js
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
class FilmDetail extends React.Component {
render() {
console.log("FilmDetail")
return (
<View style={styles.main_container}>
<Text>Détail du film</Text>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1
}
})
export default FilmDetail
// Components/Search.js
import React from 'react'
import { StyleSheet, View, TextInput, Button, FlatList, Text, ActivityIndicator} from 'react-native'
//import films from '../Helpers/filmsData'
import films from "../Helpers/filmsData.js"
import { getFilmsFromApiWithSearchedText } from '../API/TMDBApi.js' // import { } from ... car c'est un export nommé dans TMDBApi.js
//import FilmItem from "./FilmItem.js"
import FilmItem from "./FilmItems.js"
import FilmDetail from "./FilmDetail.js"
......
_displayDetailForFilm = (idFilm) => {
console.log("Display film with id " + idFilm)
this.props.navigation.navigate("FilmDetail")
//this.props.navigation.navigate()
console.log("Display film with id " + idFilm)
}
render() {
//console.log("RENDER")
//console.log(this.state.isLoading)
console.log(this.props)
return (
<View>
<View style={styles.mainContainer}></View>
<TextInput
style={styles.textinput}
placeholder="movies' title"
onChangeText={(text) => this._searchTextInputChanged(text)}
onSubmitEditing={() => this._searchFilms()}
/>
<Button style={{height: 50}} title='looking for movie' onPress={() => this._loadFilms()}/>
<FlatList
data={this.state.films}
keyExtractor={(item) => item.id.toString()}
//renderItem={({item}) => <FilmItem/>}
renderItem={({item}) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm} />}
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()
}
}}
/>
{this._displayLoading()}
</View>
)
}
}
......
Salut, J’espère que vous allez bien et votre famille.
J'ai un problème lorsque je fais une recherche dans mon application je scroll 3 ou 4 fois et j'obtiens une erreur qui dis: "encountred two children with the same key" et les films se répètent.
Merci d'avance et je souhaite que vous êtes en bonne santé
- Edité par ayoubBoudallaa 17 mars 2020 à 19:40:42
Tout da'abord je tiens à remercicer vivement l'instructeur de ce cours Pr Maxime Charruel pour cet excellent cours sur React.
Toutefois, je viens de rencontrer un bug dans le troisième chapitre que je n'arrive pas à corriger.
En fait après l'installation de react-navigation ($ npm install --save react-navigation), je rencontre cette erreur lors de lancement de l'application:
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7` from ``: None of these files exist: * debugger-ui\debuggerWorker.d9da4ed7(.native|.native.expo.ts|.expo.ts|.native.expo.tsx|.expo.tsx|.native.expo.js|.expo.js|.native.expo.jsx|.expo.jsx|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.wasm|.wasm) * debugger-ui\debuggerWorker.d9da4ed7\index(.native|.native.expo.ts|.expo.ts|.native.expo.tsx|.expo.tsx|.native.expo.js|.expo.js|.native.expo.jsx|.expo.jsx|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.wasm|.wasm) at ModuleResolver.resolveDependency (C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15) at ResolutionRequest.resolveDependency (C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\node-haste\DependencyGraph.js:282:16) at C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\lib\transformHelpers.js:267:42 at C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\Server.js:1305:37 at Generator.next (<anonymous>) at asyncGeneratorStep (C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\Server.js:99:24) at _next (C:\Users\moham\Documents\react-native-oc\MoviesAndMe\node_modules\metro\src\Server.js:119:9) at process._tickCallback (internal/process/next_tick.js:68:7)
Pouvez vous m'indiquer comment corriger ce bug?</anonymous>
bonjour j'aimerais pouvoir connecter l'app non plus sur the moovies database mais sur une base de donnée firebase j'ai tester deux trois truc mais sans y arriver pourrais tu m'aider ? merci
// Helpers/filmsData.js
export default data = [
{
id:181808,
vote_average:7.2,
title:"Star Wars VIII - Les derniers Jedi",
poster_path:"",
original_title:"Star Wars: The Last Jedi",
overview:"Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
release_date:"2017-12-13"
},
{
id:181809,
vote_average:8.1,
title:"La Guerre des étoiles",
poster_path:"",
original_title:"Star Wars",
overview:"Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
release_date:"1977-05-25"
}
]
Comment ca la data n'est pas défini? Bon, du coup j'ai appliqué une solution radicale, supprimer "data":
export default [
{
id: 181808,
vote_average: 7.2,
title: "Star Wars VIII - Les derniers Jedi",
poster_path: "",
original_title: "Star Wars: The Last Jedi",
overview: "Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
release_date: "2017-12-13"
},
{
id: 181809,
vote_average: 8.1,
title: "La Guerre des étoiles",
poster_path: "",
original_title: "Star Wars",
overview: "Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
release_date: "1977-05-25"
}
]
et *pouf* , le problème est résolu, je peux continuer à suivre le cours
(je suis surpris de ne pas avoir lu d'autres élèves ayant le même problème)
// Helpers/filmsData.js
export default data = [
{
id:181808,
vote_average:7.2,
title:"Star Wars VIII - Les derniers Jedi",
poster_path:"",
original_title:"Star Wars: The Last Jedi",
overview:"Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
release_date:"2017-12-13"
},
{
id:181809,
vote_average:8.1,
title:"La Guerre des étoiles",
poster_path:"",
original_title:"Star Wars",
overview:"Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
release_date:"1977-05-25"
}
]
Comment ca la data n'est pas défini? Bon, du coup j'ai appliqué une solution radicale, supprimer "data":
export default [
{
id: 181808,
vote_average: 7.2,
title: "Star Wars VIII - Les derniers Jedi",
poster_path: "",
original_title: "Star Wars: The Last Jedi",
overview: "Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
release_date: "2017-12-13"
},
{
id: 181809,
vote_average: 8.1,
title: "La Guerre des étoiles",
poster_path: "",
original_title: "Star Wars",
overview: "Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
release_date: "1977-05-25"
}
]
et *pouf* , le problème est résolu, je peux continuer à suivre le cours
(je suis surpris de ne pas avoir lu d'autres élèves ayant le même problème)
Pour information, j'ai trouvé la solution (qui est plus propre, et qui fonctionne plutôt que de supprimer le nom de la variable) :
Du côté du fichier de données, il faut déclarer la variable comme une constante puis l'exporter à la fin du fichier :
const data = [...];
export { data };
Du côté du fichier où on importe les données, il faut importer de cette façon :
import { data } from 'Helpers/filmsData';
Et penser à ne pas oublier les accolades lors de l'importation. On utilise ensuite la variable data.
Mon frère et moi avons eu le message d'erreur suivant, dans le chapitre "Implémenter une navigation avancée" : "Error: "Unable to resolve module `./InitialWindowSafeAreaInsets`"
Pour régler le problème, il fallait installer la librairie react-native-safe-area-context à la version 0.7.3 (à noter que par défaut il l'installait à la version 0.6, et c'est de là d'où venait notre erreur).
Pour installer directement cette version sous expo, nous avons utilisé la commande suivante :
expo install react-native-safe-area-context@0.7.3
En espérant que cela puisse aider certains d'entre vous
A bientôt et bon code ! ^-^
- Edité par AurélienRobert3 23 avril 2020 à 10:50:19
bonjour actuellement sur le cours react native (https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046321-implementez-une-navigation-avancee) je rencontre un probleme avec TabNavigator et j aurais besoin d'un peu d'aide si cela est possible. apres avoir suivi le cours j ai le message suivant : error :creating a navigator doesn’t take an argument. Maybe you are trying to use react navigation 4 api with react navigation5 ? see https://reactnavigation.org/docs/upgrading-from-4.xfor migtaion guide
je precise que j ai suivi le cours et mit a jour les bibliothéques react indiqué sur la doc react native. je pense que l'erreur vient du faite que le cours n'est pas a jour par rapport a l'evolution de react et de tabNavigator mais je ne vois pas comment faire. ------------------voici mon fichier 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": { "@react-native-community/masked-view": "0.1.6", "@react-navigation/bottom-tabs": "^5.3.3", "@react-navigation/native": "^5.1.7", "expo": "~37.0.3", "moment": "^2.24.0", "numeral": "^2.0.6", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", "react-native-gesture-handler": "~1.6.0", "react-native-reanimated": "^1.7.1", "react-native-safe-area-context": "0.7.3", "react-native-screens": "~2.2.0", "react-native-web": "~0.11.7", "react-navigation": "^4.3.8", "react-navigation-stack": "^2.3.13", "react-redux": "^7.2.0", "redux": "^4.0.5" }, "devDependencies": { "babel-preset-expo": "~8.1.0", "@babel/core": "^7.8.6" }, "private": true }
import React from 'react' import Navigation from './Navigation/Navigation' import { Provider } from 'react-redux' import Store from './Store/configureStore'
export default class App extends React.Component { render() { return ( <Provider store={Store}> <Navigation/> </Provider> ) } } ------------------voici mon fichier Navigation.js---------------- // Navigation/Navigation.js import { createAppContainer } from 'react-navigation' import { createStackNavigator } from 'react-navigation-stack' import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Search from '../Components/Search' import FilmDetail from '../Components/FilmDetail' import Favorites from '../Components/Favorites'
Je suis sur la partie "Apprivoisez le Data Binding" du cours.
Le soucis est que même en faisant un copier/coller du code donner pour tous les components à la fin du chapitre, rien ne s'affiche à part un écran blanc dans mon onglet des films favoris. Je ne sais trop quoi faire alors que cela fait longtemps que je cherche/test des solutions.
Salut, je viens de commencer ton tuto react native. J'ai un soucis, je n'arrive pas à lancer l'application sur mon téléphone Android. Quand je tape la commande npm start comme tu le fais, le code QR ne s'affiche pas.
J'aimerai savoir si je dois telecharger l'application expo uniquement dans mon smartphone?
Pour faire fonctionner Expo, il te faut installer l'application expo sur ton smartphone Android ET expo-cli sur ton pc.
Sur quel OS es-tu?
Si malgré tout, tu as bien tout installé et que ça ne marche, ça nous serait utile, que tu nous fournisses les retours de ton invite de commande pour voir ce qui cloche :)
Bonjour le cours est basé sur react Navigation 4, du coup les inclusion de librairies diffèrent. Des fonctions ont été remplacé comme createAppContainer
GOSSET Sébastien
développeur junior
My linkedIn