react native navigation

Bonjour,

J'ai un soucis concernant la navigation react native.

j'ai pour le moment deux components customs screen : Home.js et Galerie.js

Ce que je veux c'est qu'en cliquant sur le bouton de mon Home.js Appeler Galerie.js

Mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
import React from 'react';
import {ImageBackground, Text,View, Button, StyleSheet, Alert} from 'react-native';
import Navigation from '../Navigation/Navigation';
 
const image = { uri: "https://bip.fr/galerie-test/web_hi_res_512.png" };
 
class Home extends React.Component {
    render() {
        return(
            <View style={styles.container}>
                <ImageBackground source={image} style={styles.image}>
                    <Text style={styles.text}>BIP</Text>
                    <Button  onPress= {() => navigation.navigate('Galerie')} style={styles.bouton} title="Entrée"/>
                </ImageBackground>
            </View>
        )
    };
}
 
export default Home

Dans le code du button l'action onPress() me donne l'erreur : can't find variable: navigation j'ai vérifié mes imports par rapport à la documentation mais je ne trouve pas. :aie:

Code de mon Navigation.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../Components/Home';
import Galerie from '../Components/Galerie'
 
const Stack = createStackNavigator();
 
function Navigation(){
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Accueil" component={Home} />
                <Stack.Screen name="Galerie" component={Galerie} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}
 
export default Navigation;

Code de Galerie.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import { render } from 'react-dom';
import {Text,View, StyleSheet} from 'react-native';
 
class Galerie extends React.Component {
    render() {
        return(
            <View style={styles.container}>
                    <Text style={styles.text}>BIP - GALERIE</Text>
            </View>
        )
    };
}
    export default Galerie

Code de App.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import Home from './Components/Home';
//import { StyleSheet, Text, View } from 'react-native';
import Navigation from './Navigation/Navigation'
 
export default function App() {
  return (
    <Navigation/>
  );
}

Quand je regarde la documentation j'ai ça comme exemple mais je n'arrive pas à l'adapter à mon cas j'ai une erreur sur navigation.navigate comme quoi c'est pas une fonction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
 
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}