有没有办法在 ReactNavigation 的 NavigationContainer 中未定义的屏幕之间导航？

Question

我正在尝试导航到我的登录屏幕，但我没有在我的 NavigationContainer 中定义我的登录屏幕。这是因为我不希望登录屏幕成为导航栏中的选项卡。这引出了我的问题：有没有办法导航到登录屏幕，而不是将其作为导航栏中的选项卡？

export default function App() {
  return (
    <NavigationContainer>
      <SafeAreaView style={{flex: 1}}>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'home-outline'
                : 'home-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person-circle-outline' : 'person-circle-outline';
            } else if (route.name === 'Calendar') {
              iconName = focused ? 'calendar-clear' : 'calendar-clear';
            } else if (route.name === 'Agenda') {
              iconName = focused ? 'calendar-outline' : 'calendar-outline';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'blue',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Calendar" component={CalendarScreen} />
        <Tab.Screen name="Agenda" component={AgendaScreen} />
        <Tab.Screen name="New Event" component={NewEventScreen} />
      </Tab.Navigator>
      </SafeAreaView>
    </NavigationContainer>
  );
}

<Button 
   title="Do you have an account? Click here to log in"
   onPress={() => this.props.navigation.navigate("Login")}
/>

Answer 1

这是如何完成的示例：

private render() {
    const Stack = createStackNavigator();
    const landingScreen = this.props.isLoggedIn ? null : (
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
        />
    );
    
    return (
        <NavigationContainer>
            <Stack.Navigator>
                {landingScreen}
                <Stack.Screen name="HomeScreen" component={this.renderTabNavigator}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

private renderTabNavigator = () => {
    const Tab = createBottomTabNavigator();
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={SearchScreen}/>
            <Tab.Screen name="Favorites" component={FavoritesScreen}/>
            <Tab.Screen name="Settings" component={SettingsScreen}/>
        </Tab.Navigator>
    );
}