web-dev-qa-db-fra.com

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

De façon perverse, lorsque je voulais effectuer certaines actions lorsque l'écran était ouvert, je les plaçais dans composantDidMount. Par exemple, je peux récupérer des données.

comme ça.

componentDidMount() {
  this.updateData();
}

Mais avec react-navigation composantDidMount ne se produit qu'une seule fois lorsque l'utilisateur ouvre l'écran pour la première fois. Si l'utilisateur rouvre cette page ultérieurement, il ne déclenchera pas de composantDidMount.

Quel est le bon moyen de détecter quand la page (écran) est activée et faire les actions?

react-nativereact-navigationonfocusviewwillappearviewdidappear
25
rendom

Avec react-navigation, vous pouvez le faire.

  1. Ajouter des écouteurs dans 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 pouvez faire n'importe quoi dans componentDidFocus, comme récupérer des données, mettre à jour des données, ...

  2. Dans componentWillUnmount, supprimez les écouteurs

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

Pour plus de détails, voir ce RP: https://github.com/react-navigation/react-navigation/pull/3345

Mis à jour 3.x:

addListener - S'abonner aux mises à jour de cycle de vie de la navigation

React Navigation émet des événements pour filtrer les composants qui y sont abonnés:

  • willBlur - l'écran sera flou

  • willFocus - l'écran sera mis au point

  • didFocus - le focus sur l'écran (s'il y avait une transition, la transition terminée)

  • didBlur - l'écran est flou (s'il y a eu une transition, la transition est terminée)

Réf.: https://reactnavigation.org/docs/fr/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

Exemple 3.x mis à jour:

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

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

Charge utile JSON:

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

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

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

4
zvona

C'est peut-être tard, mais c'est comme ça que je l'ai résolu. Voir le code ci-dessous. N'oubliez pas d'importer avec Navigation et encapsulez vos exportations par défaut avec Navigation.

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);
3
Armar