[ReactNative] BottomTabNavigator でタブ毎のデフォルトタブを設定する

ReactNative の BottomTabNavigator にて、タブを選択したときのデフォルトタブを設定する方法。

例えば、以下のようなタブ構造になっているとします。

- HomeTab
- MembersTab
    - Members（メンバ一一覧画面）
    - Member（メンバー詳細画面）

このとき、Member（メンバー詳細画面）を見たあとに HomeTab に遷移し、また MembersTab を選択すると Member（メンバー詳細画面）が表示されたままです。

他のタブから戻ってきたときは、Members（メンバー一覧画面）を表示したい。つまり MembarsTab のデフォルトタブを Members（メンバ一覧画面）にするには、以下のようにします。（※コードは簡略化しています）

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { HomeScreen } from "@/screens/home-screen";
import { MemberScreen } from "@/screens/member-screen";
import { MembersScreen } from "@/screens/members-screen";

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator();

export const MainNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeScreen} />
      <Tab.Screen
        name="MembersTab"
        // このcomponent指定は警告が出るので、外部で定義した方が良さそう
        component={() => (
          <Stack.Navigator>
            <Stack.Screen name="Members" component={MembersScreen} />
            <Stack.Screen name="Member" component={MemberScreen}  />
          </Stack.Navigator>
        )}

        // 以下の5行を追加！
        listeners={({ navigation }) => ({
          tabPress: () => {
            navigation.navigate("MembersTab", { screen: "Members" });
          },
        })}

      />
    </Tab.Navigator>
  );
};

以上。
タブが増えたら、タブごとに listeners を追加すれば OK。