web-dev-qa-db-ja.com

反応ナビゲーション：画面、タブバーがアクティブ化/表示/フォーカス/ぼかしされたときに検出

以前、画面を開いたときにいくつかのアクションを実行したいときは、componentDidMount内にアクションを配置しました。たとえば、いくつかのデータを取得できます。

このような。

componentDidMount() {
  this.updateData();
}

ただし、react-navigationではcomponentDidMountはユーザーが最初に画面を開いたときに1回だけ発生し、後でユーザーがこのページを再度開いた場合はcomponentDidMountをトリガーしません。

ページ（画面）がアクティブ化され、アクションを実行するタイミングを検出する適切な方法は何ですか？

react-nativereact-navigationonfocusviewwillappearviewdidappear
25
rendom

react-navigationを使用すると、それを実行できます。

  1. componentDidMountまたはcomponentWillMountにリスナーを追加します

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

    または

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

    その後、データの取得、データの更新など、componentDidFocusで何でもできます...

  2. componentWillUnmountで、リスナーを削除します

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

詳細については、次のPRを参照してください。 https://github.com/react-navigation/react-navigation/pull/3345

更新された3.x：

addListener-ナビゲーションライフサイクルの更新を購読する

React Navigationは、サブスクライブする画面コンポーネントにイベントを発行します：

  • willBlur-画面はフォーカスされません

  • willFocus-画面がフォーカスされます

  • didFocus-フォーカスされた画面（遷移があった場合、遷移は完了しました）

  • didBlur-画面の焦点が合っていません（遷移があった場合、遷移は完了しました）

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

更新された3.xの例：

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

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

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は、タブのようなナビゲーションのすべての場合に機能しません。

イベントでaddListenerを使用する必要がありますdidFocusおよびdidBlurそのような行動をするために。詳細については documentation を参照してください

4
zvona

これは遅いかもしれませんが、これは私がそれを解決した方法です。以下のコードを参照してください。 withNavigationをインポートし、エクスポートのデフォルトをwithNavigationでラップすることを忘れないでください。

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