我有以下屏幕布局：如果用户未登录：入职=〉设置目标=〉可用目标（然后在这里设置按钮将使一个到home屏幕）
如果用户已登录（应显示底部选项卡栏）：

.
├── Home screen (the one previously mentioned) 
│   ├── Track screen
├── Challenges screen
│   ├── Challenges detail
│       └── Set challenge
├── Store screen
│   ├── Store detail

还有2个结构相似。
我有几个堆栈导航器和一个底部标签导航器，但它们不能正常工作。要么堆栈导航不工作，给我错误：“任何导航器都未处理有效负载为{“name”：“Track”}的操作'NAVIGATE'。”或者，底部选项卡显示，但堆栈导航器不工作。或者，主页显示一个返回引导的返回箭头，在设置目标并继续操作后，该箭头不应可见。
以下是我的导航器，在2个不同的文件：

const Stack = createNativeStackNavigator();

const AuthStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name='Onboarding'
        component={OnboardingScreen}
        options={{ headerTitle: "", headerTransparent: true }}
      />
      <Stack.Screen
        name='Setgoal'
        component={SetgoalScreen}
        options={{ headerTitle: "", headerTransparent: true }}
      />
      <Stack.Screen
        name='GoalDetails'
        component={AvailableGoalsScreen}
        options={{ headerTitle: "", headerTransparent: true }}
      />
      <Stack.Screen name='Tabs' component={MainContainer} />
    </Stack.Navigator>
  );
};

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Home' component={HomeScreen} />
      <Stack.Screen name='Track' component={TrackScreen} />
      <Stack.Screen name='Tabs' component={MainContainer} />
    </Stack.Navigator>
  );
};

const ChallengeStack = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name='Challenges' component={ChallengesScreen} />
      <Stack.Screen name='Details' component={ChallengeDetail} />
    </Stack.Navigator>
  );
};

const StoreStack = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name='Store' component={StoreScreen} />
      <Stack.Screen name='StoreDetail' component={StoreDetail} />
    </Stack.Navigator>
  );
};
export {
  AuthStack,
  HomeStack,
  ChallengeStack,
  LeaderboardStack,
  StoreStack,
  ProfileStack,
};

和底部导航：

const Tab = createBottomTabNavigator();

export default function MainContainer() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName={homeName}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            let routeName = route.name;

            if (routeName === homeName) {
              iconName = focused ? "home" : "home-outline";
            } else if (routeName === profileName) {
              iconName = focused ? "person" : "person-outline";
            } else if (routeName === challengesName) {
              iconName = focused ? "golf" : "golf-outline";
            } else if (routeName === leaderboardName) {
              iconName = focused ? "medal" : "medal-outline";
            } else if (routeName === storeName) {
              iconName = focused ? "cart" : "cart-outline";
            }

            return <IonIcons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: "#ED904C",
          tabBarInactiveTintColor: "grey",
        })}
        style={styles.tabStyle}
      >
        <Tab.Screen name={homeName} component={HomeScreen} />
        <Tab.Screen name={challengesName} component={ChallengesScreen} />
        <Tab.Screen name={leaderboardName} component={LeaderboardScreen} />
        <Tab.Screen name={storeName} component={StoreScreen} />
        <Tab.Screen name={profileName} component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我在App.js中调用的主导航器

const loggedIn = true;

const MainNavigation = () => {
  return (
    <NavigationContainer>
      {loggedIn ? <HomeStack /> : <AuthStack />}
    </NavigationContainer>
  );
};

有了这个结构，我不能从可用目标屏幕的设置目标按钮转到主页，因为它给我的是The action 'NAVIGATE' with payload {“name”：“Home”}没有被任何导航器处理。我也试过给出这样的路线：navigation.navigate（'HomeStack '，{screen：“家”），但它给了我一个类似的错误。
我需要一些关于如何使它正常工作的帮助pleaseee谢谢你。
ETA：更新App.js文件：

const getIsSignedIn = () => {
  return true;
};

function App() {
  const isSignedIn = getIsSignedIn();
  return (
  <NavigationContainer>
  <Stack.Navigator>
    {isSignedIn ? (
      <>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Challenges" component={ChallengesScreen} />
        <Stack.Screen name="Leaderboard" component={LeaderboardScreen} />
        <Stack.Screen name="Store" component={StoreScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Tabs" component={MainContainer} />
      </>
    ) : (
      <>
        <Stack.Screen name="Onboarding" component={OnboardingScreen}  options={{headerTitle: '', headerTransparent: true}}/>
        <Stack.Screen name="Setgoal" component={SetgoalScreen} options={{headerTitle: '', headerTransparent: true}}/>
        <Stack.Screen name="GoalDetails" component={AvailableGoalsScreen}  options={{headerTitle: '', headerTransparent: true}}/>
      </>
    )}
  </Stack.Navigator>
</NavigationContainer>
);
}