React Native Expo：设置登录页为初始页面并隐藏Tab导航中的登录页

Alright, here's exactly how you can implement your desired login flow and tab navigation setup. I'll walk you through the modified code and break down the key changes:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; // Import stack navigator

function LoginScreen({ navigation }) { // Receive navigation prop to handle screen transitions
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Login</Text>
      {/* Login button to navigate to tab navigation after authentication */}
      <Button 
        title="Log In" 
        onPress={() => navigation.navigate('Tabs')} 
        style={{ marginTop: 20 }}
      />
    </View>
  );
}

function VideoScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Video</Text>
    </View>
  );
}

function PodcastScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Podcast</Text>
    </View>
  );
}

function TravelScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Travel</Text>
    </View>
  );
}

function InfoScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Info</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); // Initialize stack navigator

// Wrap tab navigation in a separate component for cleaner code
function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Video" component={VideoScreen} />
      <Tab.Screen name="Podcast" component={PodcastScreen} />
      <Tab.Screen name="Travel" component={TravelScreen} />
      <Tab.Screen name="Info" component={InfoScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" screenOptions={{ headerShown: false }}>
        {/* Set Login as the default launch screen */}
        <Stack.Screen name="Login" component={LoginScreen} />
        {/* Tab navigation is only accessible after login */}
        <Stack.Screen name="Tabs" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

• Stack Navigator Wrapper: We added a Stack navigator to wrap both the LoginScreen and your existing tab navigation. This lets us control the initial screen and handle transitions between login and the tab interface.
• Initial Route Setup: The initialRouteName="Login" prop ensures the app launches directly into the login screen when opened.
• Login Navigation Trigger: The LoginScreen now receives the navigation prop, which we use in the button's onPress handler to navigate to the tab interface.
• Hidden Login Screen: Since LoginScreen lives only in the stack navigator (not the tab navigator), it will never appear in the bottom tab bar.
• Optional Header Hide: The screenOptions={{ headerShown: false }} removes the default stack header for a cleaner look—you can remove this if you want a header for the login screen.

Since you mentioned you'll add icons later, here's how to integrate MaterialCommunityIcons into your tab bar:

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;
      // Set icon based on tab name
      if (route.name === 'Video') {
        iconName = focused ? 'video' : 'video-outline';
      } else if (route.name === 'Podcast') {
        iconName = focused ? 'podcast' : 'podcast-outline';
      } else if (route.name === 'Travel') {
        iconName = focused ? 'map-marker' : 'map-marker-outline';
      } else if (route.name === 'Info') {
        iconName = focused ? 'information' : 'information-outline';
      }
      return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: 'tomato', // Active tab color
    tabBarInactiveTintColor: 'gray', // Inactive tab color
  })}
>
  {/* Your tab screens here */}
</Tab.Navigator>

内容的提问来源于stack exchange，提问作者Aakash Rathee