Partage
  • Partager sur Facebook
  • Partager sur Twitter

[COURS] Développement mobile React Native

    22 mai 2019 à 14:25:41

    Bonjour

    J'ai fini le cours hier. Merci c'était super pour un débutant comme moi.

    Cependant j'ai un soucis. Je croyais que ça venait de mon code mais j'ai téléchargé ta version de github et le soucis est le même.

    Si l'appli est killée, la liste des films favoris remonte bien, par contre l'avatar lui est invisible (si on a choisi un avatar de la gallery android par exemple). La donnée est bien stockée via le reducer et même à l'air d'être réhydratée. Mais le visuel reste blanc.

    Peux-tu me dire si le problème n'est que sur mon smartphone ? Ou tu as ce souci aussi ou quelqu'un da'autres peut être qui en est là ?

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      22 mai 2019 à 14:41:33

      Bonjour , je suis votre cours sur react native ,mais j'ai un problème 

      je suis bloqué sur la partie state , quand j'appuie sur le bouton recherche pour afficher les données de l'API , rien ne se passe 

      pourtant je suis le cours à la lettre , j'ai reessayé plusieurs fois mais ça ne marche pas , et j'ai besoin de votre aide 

      merci

      • Partager sur Facebook
      • Partager sur Twitter
        3 juin 2019 à 22:38:56

        Bonsoir, 

        Super cours,merci. Je ne sais pas si c'est ici que l'on poste ce type de message, je n'ai pas trouvé d'autre discution sur react-native. Voici le problème sur lequel je bute depuis un moment j'ai cherché dans tous les sens ... je récupère un json via un fetch, tant que je suis dans un component(comme dans le cours) tout va bien. Pour éviter plusieurs accès j'aimerai récupérer les données dans un array et pouvoir l'utiliser dans un autre js. Tout ce que je récupère c'est le tableau de la response.

        Merci d'avance pour votre aide

        Georges

        • Partager sur Facebook
        • Partager sur Twitter
          5 juin 2019 à 22:34:41

          Bonjour à tous, bonjour Maxime,

          Alors voilà,

          J'ai commencé le cours et je suis actuellement bloqué au niveau de l'ajout de Redux.

          J'ai comme error un "Invariant violation" lorsque que je clique sur un film, pour obtenir le "filmDetail"

          Ceci est causé par le connect() - je pense -

          J'ai tenté de changer les versions des dépendances, rien n'y fait.. Je ne sais pas du tout comment résoudre ce problème.. Quelqu'un à t'il rencontré celui-ci ?

          Voici mon code:

          filmDetail.js

          import React from 'react';
          import { Text, View, StyleSheet, ActivityIndicator, ScrollView, Image, TouchableOpacity } from 'react-native';
          import { getById, getImage } from '../../api/TMDBapi';
          import moment from 'moment'
          import numeral from 'numeral'
          import { connect } from 'react-redux'
          
          class FilmDetail extends React.Component {
              constructor(props) {
                  super(props);
                  this.state = {
                      film: undefined,
                      isLoading: true,
                  }
              }
          
              componentDidMount() {
                  getById(this.props.navigation.getParam('idFilm')).then(
                      data => {
                          console.log(data);
                          this.setState({
                              film: data,
                              isLoading: false
                          })
                      }
                  )
          
              }
          
              _displayLoading() {
                  if (this.state.isLoading) {
                      // Si isLoading vaut true, on affiche le chargement à l'écran
                      return (
                          <View style={styles.loading_container}>
                              <ActivityIndicator size='large' />
                          </View>
                      )
                  }
              }
          
              _seeImage(path) {
                  this.props.navigation.navigate("Cover", { path: path });
              }
          
              _displayFilm() {
                  if (this.state.film != undefined) {
                      const film = this.state.film;
                      return (
                          <ScrollView style={styles.scrollview_container}>
                              <TouchableOpacity onPress={() => this._seeImage(film.poster_path)}>
                                  <Image style={styles.image} source={{ uri: getImage(film.poster_path) }} />
                              </TouchableOpacity>
                              <Text style={styles.title_text}>{film.title}</Text>
                              <Text style={styles.description_text}>{film.overview}</Text>
                              <Text style={styles.default_text}>Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}</Text>
                              <Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
                              <Text style={styles.default_text}>Nombre de votes : {film.vote_count}</Text>
                              <Text style={styles.default_text}>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
                              <Text style={styles.default_text}>Genre(s) : {film.genres.map(function (genre) {
                                  return genre.name;
                              }).join(" / ")}
                              </Text>
                              <Text style={styles.default_text}>Companie(s) : {film.production_companies.map(function (company) {
                                  return company.name;
                              }).join(" / ")}
                              </Text>
                          </ScrollView>
                      )
                  }
              }
          
              render() {
                  return (
                      <View style={styles.main_container}>
                          {this._displayLoading()}
                          {this._displayFilm()}
                      </View>
                  )
              }
          }
          
          const styles = StyleSheet.create({
              main_container: {
                  flex: 1
              },
              loading_container: {
                  position: 'absolute',
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  alignItems: 'center',
                  justifyContent: 'center'
              },
              scrollview_container: {
                  flex: 1
              },
              image: {
                  height: 169,
                  margin: 5
              },
              title_text: {
                  fontWeight: 'bold',
                  fontSize: 35,
                  flex: 1,
                  flexWrap: 'wrap',
                  marginLeft: 5,
                  marginRight: 5,
                  marginTop: 10,
                  marginBottom: 10,
                  color: '#000000',
                  textAlign: 'center'
              },
              description_text: {
                  fontStyle: 'italic',
                  color: '#666666',
                  margin: 5,
                  marginBottom: 15
              },
              default_text: {
                  marginLeft: 5,
                  marginRight: 5,
                  marginTop: 5,
              }
          })
          
          const mapStateToProps = (state) => {
              return {
                favoritesFilm: state.toggleFavorite.favoritesFilm
              }
            }
            
            export default connect(mapStateToProps)(FilmDetail)
          // export default FilmDetail;
          

          app.js

          import React from 'react';
          import { StyleSheet } from 'react-native';
          import Search from './components/search/Search'
          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>
              );
            }
          }
          
          const styles = StyleSheet.create({
            container: {
            },
          });

          favoriteReducers.js

          // Store/Reducers/favoriteReducer.js
          
          const initialState = { favoritesFilm: [] }
          
          function toggleFavorite(state = initialState, action) {
            let nextState
            switch (action.type) {
              case 'TOGGLE_FAVORITE':
                const favoriteFilmIndex = state.favoritesFilm.findIndex(item => item.id === action.value.id)
                if (favoriteFilmIndex !== -1) {
                  // Le film est déjà dans les favoris, on le supprime de la liste
                  nextState = {
                    ...state,
                    favoritesFilm: state.favoritesFilm.filter( (item, index) => index !== favoriteFilmIndex)
                  }
                }
                else {
                  // Le film n'est pas dans les films favoris, on l'ajoute à la liste
                  nextState = {
                    ...state,
                    favoritesFilm: [...state.favoritesFilm, action.value]
                  }
                }
                return nextState || state
            default:
              return state
            }
          }
          
          export default toggleFavorite

          configureStore.js

          import { createStore } from 'redux';
          import toggleFavorite from './reducers/favoriteReducers';
          
          export default createStore(toggleFavorite);
          

          Si quelqu'un peut me dépatouiller de ceci, je le remercierai beaucoup :)




          • Partager sur Facebook
          • Partager sur Twitter
            13 juin 2019 à 15:10:52

            Bonjour j'ai un problème avec le redux au chapitre 3 quand je l'integre et que je mets 
            export default connect(mapStateToProps)(FilmDetail)
            besoin d'aide svp
            • Partager sur Facebook
            • Partager sur Twitter
              17 juin 2019 à 17:49:35

              Salut je veux créer une application qui nécessite le stockage et la récupération des données en bases de données avec react native. Du coup j'ai des connaissances en php et son fremwork symfony 4. Je veux savoir s'il est possible de le faire avec un langage back-end sans creer d'api ou si le back-end react native ne fonctionne qu'avec des apis.

              Merci d'avance 😉

              • Partager sur Facebook
              • Partager sur Twitter
                19 juin 2019 à 17:47:12

                stephen_enock a écrit:

                Bonjour j'ai un problème avec le redux au chapitre 3 quand je l'integre et que je mets 

                export default connect(mapStateToProps)(FilmDetail)

                besoin d'aide svp

                stephen_enock a écrit:

                Bonjour j'ai un problème avec le redux au chapitre 3 quand je l'integre et que je mets 

                export default connect(mapStateToProps)(FilmDetail)

                besoin d'aide svp
                Salut ! On peut voir ton fichier FilmDetail.js ?



                • Partager sur Facebook
                • Partager sur Twitter
                  22 juin 2019 à 7:30:23

                  Salut les gars j'ai posté mon problème sur cette page, je me dis que j'aurais du le faire ici.

                  Un coup de main ?:'(

                  Edit:

                  Problème résolu.

                  -
                  Edité par kamoba 22 juin 2019 à 22:18:17

                  • Partager sur Facebook
                  • Partager sur Twitter
                    11 juillet 2019 à 12:01:04

                    Bonjour,

                    Partons du principe qu'il n'y a pas de mauvaises questions... J'ai 2 soucis :

                    1. je n'arrive pas à disposer de Nuclide à partir d'Atom,

                    2. concernant le chapitre "Faites vos premiers pas avec les components React", je me suis aperçu que je ne pointais pas sur un fichier app.js, mais sur un fichier app.tsx. Pourquoi ?

                    Et donc je suis parti de ce app.tsx qui fonctionnait bien pour afficher "Hello !" sur mon iphone et j'ai fait un copier/coller de vos lignes, ainsi que pour le ficher search.js 

                    Or, sur mon iphone apparaît le message d'erreur suivant :

                    "Unable to resolve module './Components/Search' from 'C:\Users\AG\Desktop\ReactNative\MoviesAndMe\App.tsx'. Indeed, none of these files exist:

                    *'C:\Users\AG\Desktop\ReactNative\MoviesAndMe\Search(.native||.ios.js|.natve.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx.native.tsx|.tsx)'

                    Et le même message avec "index" à la place de "Search"

                    Que se passe-t-il ?

                    Merci pour vos réponses.

                    Alain


                    • Partager sur Facebook
                    • Partager sur Twitter

                    [COURS] Développement mobile React Native

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown