BottomTabNavigatorとStackNavigator間でのnavigation方法

ReactNativeでBottomTabとStackでナビゲーションする際に、stackのページからBottomTabのページに遷移できないことがよくありました。

StackNavigator.tsx

const StackNavigator = () => {
return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName="SignUp"
    >
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="HelloWorld" component={HelloWorld} />
       <Stack.Screen name="BottomTab" component={BottomTabNavigator} />
    </Stack.Navigator>
  );
};

BottomTabNavigator.tsx

export const BottomTabNavigator = () => {
return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Tab.Screen
        name="さがす"
        component={Home}
      />
      <Tab.Screen
        name="まいぺーじ"
        component={Mypage}
      />
    </Tab.Navigator>
  );
};

上記のようなnavigationでStackNavigatorのHelloWorld.tsxからBottomTabのまいぺーじへの遷移がnavigation.navigate("まいぺーじ");では実現できません。

navigation.navigate("BottomTab", { screen: "まいぺーじ" });
上記のようにすることによってBottomTabに遷移することができます。