Bonjour,

Je suis le cours react-native et j'ai eu un probleme arrivé à la navigation.

Pour moi, le code proposé dans le cours ne fonctionnait pas. J'ai donc été consulter la doc et je pense qu'il y a eu de grosse modif entre la version du cours et la version de react-navigation actuelle.

Bref... j'ai développé une maquette ayant sensiblement le meme fonctionnement sue la MOOC (sans fioriture) pour tester la fonctionnement de la navigation.

Lorsque je fais : HomeScreen --> Détail ; avec le bouton de navigation intégré directement à ma class HomeScreen, tout fonctionne parfaitement.

Le probleme : Je souhaite déporter le bouton et le considérer comme un "component custom" (pour rattraper le fonctionnement du MOOC et l'utiliser avec une flatlist dynamique par la suite) intégré à ma class HomeScreen. Lorsque que je fais cela, j'ai le message d'erreur suivant : "TypeError: Undefined is not an object ( evaluating 'this.prop.navigation.navigate')

Je vous met à disposition le contenu de mes 4 fichiers.

Si quelqu'un pouvait m'expliquer ce que je fais mal, car là, je sèche...

Merci

//fichier app.js

import 'react-native-gesture-handler'
import React from 'react';
import { StyleSheet, Text, View } from 'react-native'

import HomeScreen from './src/screens/HomeScreen'
import DetailScreen from './src/detail'

import {NavigationContainer} from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

//HomeScreen

import React from 'react';
import { View, Text, Button } from 'react-native';
import Bouton from '../screens/Bouton';


class HomeScreen extends React.Component  {
  render() {
    console.log(this.props)
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text>Zone 1</Text>
        </View>

        <Bouton/>
      
      </View>
    )
  }
}


export default HomeScreen;

//Bouton

import React from 'react';
import { View, Text, Button } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

class Bouton extends React.Component {

    render() {
      console.log(this.props)
      return (
        <View style={{ flex: 1, backgrountColor: 'blue', height: 120, alignItems: 'center', justifyContent: 'center' }}>
          <TouchableOpacity
            style={{backgroundColor: 'blue'}}
            onPress={() => this.props.navigation.navigate('Detail')}
            >
            <Text>Home Screen</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }
  
  export default Bouton;

//detail

import React  from 'react';
import { View, Text } from 'react-native';

class Detail extends React.Component {

  render() {
    
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    )
  }
}

export default Detail;

idem, je suis bloqué à la navigation

Exactement le même problème

Bonjour,

J'ai finis par trouver réponse à mon problème en épluchant la documentation react-navigation.

Le problème de ce MOOC sur ce sujet là est qu'il n'est pas à jour de la version 5 téléchargeable au moment ou j’écris ces lignes.

Alors voilà la navigation ne se déclare plus de la même manière https://reactnavigation.org/docs/hello-react-navigation:

// Navigation/Navigation.js
import 'react-native-gesture-handler';
import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Search from '../Components/Search'
import FilmDetail from '../Components/FilmDetail'

const Stack = createStackNavigator();

export default function App() {
  return(
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Search" component={Search}/>
        <Stack.Screen name="FilmDetail" component={FilmDetail}/>
      </Stack.Navigator>
    </NavigationContainer>
    )
}

Clao260 a écrit:

Bonjour,

J'ai finis par trouver réponse à mon problème en épluchant la documentation react-navigation.

Le problème de ce MOOC sur ce sujet là est qu'il n'est pas à jour de la version 5 téléchargeable au moment ou j’écris ces lignes.

Alors voilà la navigation ne se déclare plus de la même manière https://reactnavigation.org/docs/hello-react-navigation:

// Navigation/Navigation.js
import 'react-native-gesture-handler';
import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Search from '../Components/Search'
import FilmDetail from '../Components/FilmDetail'

const Stack = createStackNavigator();

export default function App() {
  return(
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Search" component={Search}/>
        <Stack.Screen name="FilmDetail" component={FilmDetail}/>
      </Stack.Navigator>
    </NavigationContainer>
    )
}

Merci, j'ai également résolu mon problème!

Cette nouvelle librairie de react navigation fonctionne-t-elle chez vous avec la méthode : displayDetailForFilm  ?

Pour ma part j'ai un message d'erreur

Hello !
L'article du cours sur React Navigation n'utilise pas la dernière version en date (version 5). Il n'est plus standard dans React Navigation 5 de récupérer les props de la navigation ainsi. Vous pouvez consulter la doc de react navigation pour plus d'info

La solution la plus simple est lors de la création d'un projet React Native, choisir 'tabs' et non 'blank', la dernière version de react navigation sera déjà mis en place et la création de nouvel onglet/page sera alors très facile

si quelqu'un a un code qui fonctionne, ce serait possible de le poster ici svp ? ça fait 2 jours que je suis bloqué aussi, et désolé malgré vos indications, je ne m'en sors pas ! Je suis limite de tout reprendre depuis le début...

Edit : je viens de trouver... Un gros merci à Clao260 ! Pour précision : il suffit de prendre le code de Clao260 pour le Navigation.js et de le copier, et conserver le code de App.js du cours. Tout fonctionne, je peux continuer ! :=)

-
Edité par VincentBouchet5 1 juin 2020 à 11:00:15

Perso mon soucis c'est avec l récupération des paramètres...

Même en faison 

const idFilm = this.props.route.params.idFilm

J'ai une erreur me disant que "this" est undefined.
 

Salut, pour passer des params maintenant c'est 

const idFilm = this.props.route.params.idFilm;