React-navigation: Détecte quand l'écran, la barre d'onglets est activée / apparaît / se concentre / flou

Question

Perversement quand je voulais faire quelques actions lorsque l'écran est ouvert, je les mets dans componentDidMount. Par exemple, je peux récupérer des données.

comme ça.

 componentDidMount() {
  this.updateData();
}
 

Mais avec react-navigation componentDidMount ne se produit qu'une seule fois lorsque l'utilisateur ouvre l'écran pour la première fois, et si un utilisateur ultérieur ouvre à nouveau cette page, il ne déclenchera pas componentDidMount.

Quelle est la bonne façon de détecter quand la page (écran) est activée et d'effectuer des actions?

Answer 1

Avec react-navigation, vous pouvez le faire.

Exemple de code fait en 2 étapes :

1. Ajouter les auditeurs en componentDidMountou componentWillMount

   this.subs = [
     this.props.navigation.addListener('didFocus', (payload) => this.componentDidFocus(payload)),
   ]; 
   

   ou

   this.subs = [
     this.props.navigation.addListener('didFocus', this.componentDidFocus),
     this.props.navigation.addListener('willBlur', this.componentWillBlur),
   ];
   

   Ensuite, vous ne pouvez rien faire dans componentDidFocus, comme l'extraction de données, mise à jour des données,...

2. En componentWillUnmount, retirez les auditeurs

   componentWillUnmount() {
     this.subs.forEach(sub => sub.remove());
   }
   

Référence de l'API de Documents :

Réagir la navigation v3.x, v4.x:

addListener - Abonnez-vous aux mises à jour de navigation du cycle de vie

Réagir de Navigation émet des événements aux composants d'un écran de s'abonner à eux:

• willFocus - l'écran se concentrer
• didFocus - l'écran concentré (si il y a une transition, la transition terminée)
• willBlur - l'écran est floue
• didBlur - l'écran floue (si il y a une transition, la transition terminée)

Réagir de la navigation 3.x, 4.x exemple:

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

La charge utile JSON:

{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};

Ref: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

Answer 2

C'est peut-être en retard, mais c'est comme ça que je l'ai résolu. Voir le code ci-dessous. N'oubliez pas d'importer avecNavigation et de boucler votre exportation par défaut avecNavigation.

 import { withNavigation } from "react-navigation";
 componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

export default withNavigation(Your Class Name);
 

Answer 3

componentDidMount / componentWillUnmount ne fonctionne pas dans tous les cas de navigation (comme les onglets).

Vous devez utiliser addListener avec les événements didFocus et didBlur pour effectuer de telles actions. Voir la documentation pour plus de détails

Answer 4

NavigationEvents est une autre façon d'ajouter un écouteur d'événements juste à l'intérieur de JSX. Voir la documentation pour plus de détails.

Cela ressemble à ceci:

 import { NavigationEvents } from 'react-navigation';

return (
  <ScrollView style={styles.container}>
    <NavigationEvents            
      onDidBlur={payload => console.log('did blur', payload)}
    />
    {this.props.children}
  </ScrollView>
);