ReactNative Impossible de mettre à jour un composant à partir du corps de la fonction d'un > composant différent

Question

Mon AccueilEn-tête se présente comme suit :

import React from 'react'
import { View, StyleSheet, Text, Image } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome5';

export default function HomeHeader({navigation}) {

    return (
        <View style={styles.home_header}>
            <Icon style={styles.menu} name="bars" size={30} color="white" 
                onPress={ navigation.toggleDrawer() }
            />

            <Image
                style={styles.header_logo}
                source={require('../assets/logo.png')}
            />
            <Text>Hello</Text>
        </View>
    )
}

Et je l'utilise dans mon Accueil écran comme celui-ci :

return (
    <View>
      <HomeHeader navigation={navigation} />
    </View>
)

Mais je reçois ce message d'erreur :

Avertissement : Impossible de mettre à jour un composant à l'intérieur du corps de la fonction d'un d'un autre composant.

Ce que j'essaie de faire, c'est que j'ai séparé la section de l'en-tête de mon écran HOME dans un composant séparé appelé HomeHeader. Et dans ce composant, j'attache le gestionnaire d'événement pour basculer l'ouverture/fermeture du DrawerNavigation (menu du tiroir de gauche).

Si je crée un bouton dans mon écran HOME et que j'ajoute le gestionnaire d'événement pour basculer le tiroir, cela fonctionne correctement. Mais le problème ne se pose que si j'essaie de le faire à l'intérieur de mon composant HomeHeader.

J'utilise ReactNavigation v5 et j'ai essayé cette méthode : https://reactnavigation.org/docs/connecting-navigation-prop/

Pas de chance pour l'instant.

Answer 1

Changer onPress={ navigation.toggleDrawer() } a onPress={ ()=> navigation.toggleDrawer() }

Vous trouverez plus d'informations à ce sujet dans aquí