バージョン: 6.x

ナビゲーションライフサイクル

前のセクションでは、2つの画面（HomeとDetails）を持つスタックナビゲーターを操作し、navigation.navigate('RouteName')を使用してルート間を移動する方法を学びました。

このコンテキストにおける重要な質問は、Homeから移動したとき、または戻ってきたときにHomeはどうなるのかということです。ルートは、ユーザーが離れたり戻ってきたりしたことをどのように知るのでしょうか？

Webのバックグラウンドからreact-navigationに来ている場合、ユーザーがルートAからルートBに移動すると、Aはアンマウントされ（componentWillUnmountが呼び出され）、ユーザーが戻ってきたときにAは再びマウントされると想定するかもしれません。これらのReactライフサイクルメソッドは依然として有効であり、react-navigationで使用されていますが、その使用方法はWebとは異なります。これは、モバイルナビゲーションのより複雑なニーズによって driven されています。

シナリオ例

画面AとBを持つスタックナビゲーターを考えてみましょう。Aに移動した後、そのcomponentDidMountが呼び出されます。Bをプッシュすると、そのcomponentDidMountも呼び出されますが、Aはスタックにマウントされたままであるため、componentWillUnmountは呼び出されません。

BからAに戻ると、BのcomponentWillUnmountが呼び出されますが、AのcomponentDidMountは、Aがずっとマウントされたままだったため、呼び出されません。

同様の結果は、他のナビゲーターでも（組み合わせて）観察できます。各タブがスタックナビゲーターである2つのタブを持つタブナビゲーターを考えてみましょう。

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First">
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="Settings"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Profile" component={ProfileScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
        <Tab.Screen name="Second">
          {() => (
            <HomeStack.Navigator>
              <HomeStack.Screen name="Home" component={HomeScreen} />
              <HomeStack.Screen name="Details" component={DetailsScreen} />
            </HomeStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

HomeScreenから開始してDetailsScreenに移動します。次に、タブバーを使用してSettingsScreenに切り替え、ProfileScreenに移動します。この一連の操作が完了すると、4つの画面すべてがマウントされます！タブバーを使用してHomeStackに戻ると、DetailsScreenが表示されます。 HomeStackのナビゲーション状態は保持されています！

React NavigationでReactライフサイクルメソッドがどのように機能するかを理解したので、最初に尋ねた質問に答えてみましょう。「ユーザーが離れている（ぼかし）か、戻ってきた（フォーカス）かをどのようにして知るのでしょうか？」

React Navigationは、それらを購読する画面コンポーネントにイベントを送信します。画面がフォーカスされたとき、またはフォーカスが外れたときを知るために、focusおよびblurイベントをリッスンできます。

例

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

利用可能なイベントとAPIの使用法の詳細については、ナビゲーションイベントを参照してください。

イベントリスナーを手動で追加する代わりに、useFocusEffectフックを使用して副作用を実行できます。ReactのuseEffectフックに似ていますが、ナビゲーションライフサイクルに関連付けられています。

例

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

画面にフォーカスがあるかどうかによって異なるものをレンダリングする場合は、useIsFocusedフックを使用できます。これは、画面にフォーカスがあるかどうかを示すブール値を返します。

まとめ

Reactのライフサイクルメソッドは依然として有効ですが、React Navigationは、navigation prop を介して購読できる المزيدのイベントを追加します。
useFocusEffectまたはuseIsFocusedフックを使用することもできます。

シナリオ例​

React Navigationライフサイクルイベント​

まとめ​

シナリオ例

React Navigationライフサイクルイベント

まとめ