导航到材料底部导航的不同选项卡中的堆栈屏幕时出现故障导航

Question

如标题所述，我的应用程序中嵌套了导航堆栈，如下所示

const MainStackNavigation: React.FC = () => {
  return (
    <Stack.Navigator
      initialRouteName="ScreenZero"
      headerMode="screen">
      <Stack.Screen
        name="BottomStackNavigation"
        component={BottomStackNavigation}
      />

      <Stack.Screen
        name="ScreenZero"
        component={ScreenZero}
      />
    </Stack.Navigator>
  );
};

const BottomNavigation: FC = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarPosition="bottom">
      <Tab.Screen
        name="Home"
        component={HomeStack}
      />
      <Tab.Screen
        name="Setting"
        component={SettingStack}
      />
    </Tab.Navigator >
  );
};

const HomeStack: FC = () => {
  return (
    <Stack.Navigator
      initialRouteName="ScreenOne">
      <Stack.Screen name="ScreenOne" component={ScreenOne} />
      <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
    </Stack.Navigator>
  );
};

const SettingStack: FC = () => {
  return (
    <Stack.Navigator
      initialRouteName="ScreenThree">
      <Stack.Screen name="ScreenThree" component={ScreenThree} />
      <Stack.Screen name="ScreenFour" component={ScreenFour} />
    </Stack.Navigator>
  );
};

假设我在 BottomNavigation -> SettingStack -> ScreenFour 中，然后我想导航到 ScreenOne 中的 HomeStack。应用程序不是直接动画到 ScreenOne，而是先导航到 HomeStack，然后导航到 ScreenOne。所以你可以看到我们有这种奇怪的过渡效果，看起来很迷幻。

有什么办法可以让过渡更加流畅？将 ScreenOne 放入 HomeStack 不是我想要的，因为 ScreenOne 将从不同堆栈中的多个屏幕进行导航