Bonjour à tous, Je me retrouve exactement avec le même problème. Je me faisais une joie de comprendre et réaliser cette App. Est-ce que quelqu'un peut m'aider? Pour info, ce qui est affiché par defaut sur App.js est automatique! Je n'ai absolument pas la même chose comme dans le cours avec "render". Donc je ne peux pas aller plus loin Merci d'avance pour votre aide!
DimitriStachowski a écrit:
Bonjour à tous,
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 !
- Edité par JessicaKuijer 21 juillet 2020 à 20:07:42
de mon côté je suis bloqué à l'étape "persistance des données", j'ai une erreur : redux-persist failed to create sync storage. falling back to noop storage
en regardant dans la doc j'ai bien vue qu'on est passé à une V6, j'ai testé les codes exemples de la doc mais ca ne fonctionne pas mieux.
qu'est-ce que je fais mal ?
Merci
// App.js
import React from 'react'
import Navigation from './Navigation/navigation'
import { Provider } from 'react-redux';
import Store from './Store/configureStore'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'
export default class App extends React.Component {
render() {
let persistor = persistStore(Store)
return (
<Provider store={Store}>
<PersistGate persistor={persistor}>
<Navigation />
</PersistGate>
</Provider>
)
}
}
// Store/configureStore.js
import { createStore } from 'redux'
import toggleFavorite from './Reducers/favoriteReducer'
import SettingAvatar from './Reducers/avatarReducer'
import { persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const rootPersistConfig = {
key: 'root',
storage: storage
}
export default createStore(persistCombineReducers(rootPersistConfig, {toggleFavorite, SettingAvatar}))
Bonjour il me semble que l'utilisation du composant react-navigation à changé par rapport à ce qui montré sur la partie concevez une navigation entre vos vues du cours la documentation à l'air de montré un usage différent ( dés l'import des différents type de navigation qui on été séparé dans des sous espace de noms ).
Bonjour à tous, j ai lu pratiquement entièrement le sujet sans trouver de réponses ou même de personnes ayant eu le même problème que moi..
Je suis au début du cours , au chapitre "utilisez les props", sur l'exercice ou il faut styliser le titre/description..., bon déja je n'ai pas reussi l'exercice tout seul sans la solution x), mais c est surtout que même avec la solution je suis bloqué à cause de l'image, en effet en face de source j'ai juste ecrit image comme sur la solution mais sur mon telephone, ca me dit "image" is not defined ou quelque chose dans le genre...
Si quelqu un pourrait m aider ca serait cool je laisse un c/c de mon code ici
Merci d avance
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
class FilmItem extends React.Component {
render () {
return (
<View style={styles.main_container}>
<Image
style={styles.image}
source={{ uri: "image" }}
/>
<View style={styles.content_container}>
<View style={styles.header_container}>
<Text style={styles.title_text}>Titre du film</Text>
<Text style={styles.vote_text}>Vote</Text>
</View>
<View style={styles.description_container}>
<Text style={styles.description_text} numberOfLines={6}>Description</Text>
</View>
<View style={styles.date_container}>
<Text style={style.date_text}>Sorti le 00/00/0000</Text>
</View>
</View>
</View>
)
}
}
Finalement j 'ai reglé ce problème tout seul hier, j'avais juste oublié d'importer le composant React native ' Image ' .
Par contre maintenant je suis bloqué au chapitre initiez vous aux cycles de vie des component, même en faisant copier/ coller le code de l'exemple , 'ai une erreur qui s'affiche sur mon iphone " TypeError : undefined is not an object (evaluating.genres.map"
Je vais continuer a chercher pourquoi tout seul mais si jamais quelqu'un passe par la
Bonjour il me semble que l'utilisation du composant react-navigation à changé par rapport à ce qui montré sur la partie concevez une navigation entre vos vues du cours la documentation à l'air de montré un usage différent ( dés l'import des différents type de navigation qui on été séparé dans des sous espace de noms ).
Bonjour il me semble que l'utilisation du composant react-navigation à changé par rapport à ce qui montré sur la partie concevez une navigation entre vos vues du cours la documentation à l'air de montré un usage différent ( dés l'import des différents type de navigation qui on été séparé dans des sous espace de noms ).
Bonjour il me semble que l'utilisation du composant react-navigation à changé par rapport à ce qui montré sur la partie concevez une navigation entre vos vues du cours la documentation à l'air de montré un usage différent ( dés l'import des différents type de navigation qui on été séparé dans des sous espace de noms ).
@SamuelGaborieau3 : Merci de ta réponse mais je ne comprends pas ta commande -> npm install --save react-navigation@version-du-cours
Peux-tu m'aiguiller ?
- Edité par connexion61 il y a environ 9 heures
lors qu'on install un package sur npm on peut précisé une version que l'on veut en rajoutant un @ suivit d'une version spécifique, le @version-du-cours demande quelle version de react-navigation le cours utilise. @StevenYo à réussit à suivre le cours avec la version@3.06
mais la page npm de la version indique que cette version n'est plus maintenu à long terme et qu'il faut utilisé au minimum la version 4.0.0
Si le cours utilise vraiment une version antérieur à la version 4, peut être qu'une mise à jour de ce chapitre pourrait être intéressant..
J'ai fait la mise à jour malheureusement cela ne résout pas le problème, j'ai toujours l'erreur : "TypeError: undefined is not an object (evaluating 'this.props.navigation'
Bonjour @connexion61 TypeError undefined is not a object ne doit probablement pas venir de la mise à jour,
Tu peut peut-être nous posté le contenu du composant Search ( notament de la ligne 60 ) qui à l'air d'être directement accusé par le message de ton erreur,
voir même ouvrir un sujet sur le forum dans la catégorie javascript.
L'erreur indique que sur une donnée qui n'est pas définie ( undefined ) tu as essayé d'appelé un attribut où une méthode, pour essayé de réglé ce problème tu peut faire des console.log des données que tu utilise dans le composant Search et voir dans le résultat des logs si une données na pas la valeur que tu attendais ( comme undefined à la place d'un object par exemple ). Comme ça tu seras précisément de qu'elle donnée vient l'erreur et se seras plus facile de la corrigé.
Re bonjour bon ben this.props.navigation et undefined dans ton composant et si tu appel une methode ( comme navigate ) dessus ben TypeError undefined is not a object,
pour le vérifié dans ton constructeur tu peut ajouté un log
de la donnée et regardé ce quelle contient dans ton terminal au moment de l'execution:
Pour une raison où une autre la props navigation na pas été hydraté puisque ces une props le problème vient du composant parent qui ne donne pas la props à sont composant enfant..
J'aurais besoin d aide, j en suis a la partie ou il faut éjecter l app pour en faire une application react native mais impossible pour moi de la lancer sur l'émulateur android que j ai, ça me met un message d'erreur " Command `run-android` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project. "
Exactement pareil quand je veux lancer la commande " react-native link" ça me met " react-native link Command `link` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project. "
J ai fait comme dis dans le cours, j 'ai crée un nouveau dossier, lancer react native init dedans, copier-coller les fichiers que le formateur dis de copier, mais toujours ce même problème, je suis bloque dessus depuis une semaine, je ne sais pas quoi faire..
Je viens de commencer ce cours et je suis bloqué au moment de l'import des films au chapitre "utiliser les props".
En effet, lorsque je souhaite passer de:
// Components/Search.js
render() {
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
{/* Ici j'ai simplement repris l'exemple sur la documentation de la FlatList */}
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
</View>
)
}
où tout se passe comme prévu chez moi et qui affiche correctement "a b", à :
// Components/Search.js
import films from '../Helpers/filmsData'
render() {
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
<FlatList
data={films}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
issu de "https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/4978176-utilisez-les-props", les titres de films ne s'affichent pas chez moi.
Est-ce dû à la version du npm installé?
Quelqu'un aurait-il une idée afin de me débloquer?
Merci de votre temps.
Cordialement.
- Edité par LéoJellimann 27 septembre 2020 à 23:37:22
Cependant, je n'arrive pas à récupérer les logs, peux-tu me dire ou je peux y avoir accès dans Atom ?
Merci
SamuelGaborieau3 a écrit:
Re bonjour bon ben this.props.navigation et undefined dans ton composant et si tu appel une methode ( comme navigate ) dessus ben TypeError undefined is not a object,
pour le vérifié dans ton constructeur tu peut ajouté un log
de la donnée et regardé ce quelle contient dans ton terminal au moment de l'execution:
Pour une raison où une autre la props navigation na pas été hydraté puisque ces une props le problème vient du composant parent qui ne donne pas la props à sont composant enfant..
Je viens de commencer ce cours et je suis bloqué au moment de l'import des films au chapitre "utiliser les props".
En effet, lorsque je souhaite passer de:
// Components/Search.js
render() {
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
{/* Ici j'ai simplement repris l'exemple sur la documentation de la FlatList */}
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
</View>
)
}
où tout se passe comme prévu chez moi et qui affiche correctement "a b", à :
// Components/Search.js
import films from '../Helpers/filmsData'
render() {
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
<FlatList
data={films}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
issu de "https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/4978176-utilisez-les-props", les titres de films ne s'affichent pas chez moi.
Est-ce dû à la version du npm installé?
Quelqu'un aurait-il une idée afin de me débloquer?
Merci de votre temps.
Cordialement.
- Edité par LéoJellimann 27 septembre 2020 à 23:37:22
Bonjour, tu peux nous montrer ton fichier ../Helpers/filmsData
Et tu peux nous indiquez si tu as quelconques erreurs dans la console ou autre ?
- Edité par MaximeDétaille 8 octobre 2020 à 16:53:00
J'ai commencé le cours. J'ai une petite problème pour installer watchmanconfig. j'ai fait toutes les étapes pour installer cela mais, je n'arrive pas la voir.
Je viens de commencer ce cours et je suis bloqué au moment de l'import des films au chapitre "utiliser les props".
En effet, lorsque je souhaite passer de:
// Components/Search.js
render() {
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
{/* Ici j'ai simplement repris l'exemple sur la documentation de la FlatList */}
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
</View>
)
}
où tout se passe comme prévu chez moi et qui affiche correctement "a b", à :
// Components/Search.js
import films from '../Helpers/filmsData'
render() {
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
<FlatList
data={films}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
issu de "https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/4978176-utilisez-les-props", les titres de films ne s'affichent pas chez moi.
Est-ce dû à la version du npm installé?
Quelqu'un aurait-il une idée afin de me débloquer?
Merci de votre temps.
Cordialement.
- Edité par LéoJellimann 27 septembre 2020 à 23:37:22
Bonjour, tu peux nous montrer ton fichier ../Helpers/filmsData
Et tu peux nous indiquez si tu as quelconques erreurs dans la console ou autre ?
- Edité par MaximeDétaille 8 octobre 2020 à 16:53:00
J'ai suivi le tuto et j'aimerai comprendre une chose mais je ne trouve pas l'info.
J'aimerai savoir comment on utilise à la fois la partie web et la partie native.
Voici mon cas qui pose problème en utilisant l'anthentification Gmail avec firebase.
Pour la partie web, pas de soucis.
Par contre si je veux utiliser sur mobile. Je suis obliger de passer par la fonction 'eject' et d'avoir mon projet modifier. Et à partir de ce moment, la je ne peux plus utiliser la partie web.
Avez vous eu le même soucis ? ou une maniére d'utiliser à la fois la partie web et mobile.
J'ai rencontré une difficulté lors de ce cours au moment de faire le "défilement infini". A force de scroll, une erreur "Encountered two children with the same key, %d. Keys should be unique so that component maintain their identity across update".
Je ne pense pas être le seul à avoir rencontré ce bug, c'est pourquoi je souhaite y apporter une solution :
Ceci est le code d'origine:
<FlatList
data={this.state.films}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => <FilmItem film={item}/>}
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()
}
}}
/>
La correction se fait au niveau du keyExtractor :
<FlatList
data={this.state.films}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <FilmItem film={item}/>}
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()
}
}}
/>
C'est la façon d'utiliser le keyExtractor la plus standard que j'ai trouvé, je ne sais pas pourquoi ce n'est pas celle utilisée dans le cours et je ne sais pas non plus en quoi ce qui était dans le cours provoquait ce bug.
Si quelqu'un a des réponses ou des détails à apporter à mon poste, je vous en serais reconnaissant !
Bonjour. Je suis actuellement le cours développer une application mobile avec React Native. Je n'arrive pas à afficher infos récupérées depuis le site Wordpress.Je récupère bien les données dans la méthode getAdressesFromApiWithSearchedText mais c'est un array , j'ai essayé d'utiliser 'map' mais je n'arrive pas à afficher les données retournées sur l'écran. Pour être plus précis, j'ai besoin de conseil pour afficher les données retournées dans un tableau. Je n'ai aucune erreur.
Merci par avance.
Voici mes fichiers.
Search.tsx
import React from 'react';
import { StyleSheet, View, TextInput, Button, Text,FlatList,ActivityIndicator } from 'react-native';
import AdressesItem from '../Components/AdressesItems';
import {getAdressesFromApiWithSearchedText} from '../API/Wpv2';
class Search extends React.Component {
constructor(props) {
super(props)
this.searchedText = " " // Initialisation de notre donnée searchedText en dehors du state
this.state = {
adresses: [],
isLoading:false
}
}
_loadAdresses() {
if (this.searchedText.length > 0)
{ // Seulement si le texte recherché n'est pas vide
getAdressesFromApiWithSearchedText(this.searchedText).then(data => {
this.setState({ adresses: data.results, isLoading:false })
})
getAdressesFromApiWithSearchedText("").then(data => console.log(data));
}
}
_searchTextInputChanged(text) {
this.searchedText = text // Modification du texte recherché à chaque saisie de texte, sans passer par le setState comme avant
}
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
</View>
)
}
}
render() {
console.log(this.state.isLoading)
return (
<View style={styles.main_container}>
<TextInput
style={styles.textinput}
placeholder='Rechercher une adresse'
onChangeText={(text) => this._searchTextInputChanged(text)}
onSubmitEditing={() => this._loadAdresses()}
/>
<Button title='Rechercher' onPress={() => this._loadAdresses()}/>
<FlatList
data={this.state.adresses}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => <AdressesItem adresse={item}/>}
/>
{ this.state.isLoading ?
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
</View>
: null
}
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
marginTop: 20,
color : '#000000',
},
textinput: {
margin: 5,
marginRight: 5,
height: 50,
borderColor: '#000000',
borderWidth: 1,
paddingLeft: 5,
borderRadius:5
},
loading_container: {
position: 'absolute',
left: 0,
right: 0,
top: 100,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
})
export default Search
le cours react native est tres bien fait , mais dommage, il semble ne plus etre a jour, et meme en piochant dans la doc, je trouve pas comment faire. Je suis au chapitre react native navigation.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.