React Native中如何设置登录页为默认启动页（React Navigation 3）

Got it, let's walk through how to set this up for React Navigation 3—super straightforward once you restructure your navigation setup! Here's exactly what you need to do:

Right now, your bottom tab navigator is the root of your app. We'll replace that with a switch navigator as the root. Switch navigators only display one screen at a time and don't retain navigation history, which is perfect for login flows (users won't be able to navigate back to the login screen after logging in).

Here's the code to restructure your navigation:

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

// Import your existing screens
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import YourOtherTabScreen from './screens/YourOtherTabScreen';

// Keep your existing bottom tab navigator setup
const BottomTabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  // Add all your existing tab screens here
  OtherTab: YourOtherTabScreen,
});

// Create the root switch navigator
const RootNavigator = createSwitchNavigator(
  {
    Login: LoginScreen, // Your new login screen
    Main: BottomTabNavigator, // Your existing tab-based main screen
  },
  {
    initialRouteName: 'Login', // Set login as the default startup screen
  }
);

export default createAppContainer(RootNavigator);

In your LoginScreen component, add logic to navigate to the Main route once the login is successful. Use the navigation prop provided by React Navigation:

// Inside LoginScreen's login handler function
const handleLogin = async () => {
  // Replace this with your actual login logic (API call, credential validation, etc.)
  const loginSuccess = await authenticateUser(username, password);

  if (loginSuccess) {
    // Navigate to the bottom tab main screen
    this.props.navigation.navigate('Main');
  }
};

Since the Login screen is part of the switch navigator (not the bottom tab navigator), it won't display the bottom tab bar automatically—no extra code needed here! That's exactly the behavior you want.

If you want users to stay logged in after closing the app, use AsyncStorage to save the login state. Then set the initial route based on that state when the app loads:

import AsyncStorage from '@react-native-community/async-storage';
import { ActivityIndicator } from 'react-native';

class App extends React.Component {
  state = {
    isLoading: true,
    initialRoute: 'Login',
  };

  componentDidMount() {
    this.checkSavedLoginState();
  }

  checkSavedLoginState = async () => {
    const userToken = await AsyncStorage.getItem('userToken');
    this.setState({
      initialRoute: userToken ? 'Main' : 'Login',
      isLoading: false,
    });
  };

  render() {
    if (this.state.isLoading) {
      return <ActivityIndicator size="large" />; // Show loading while checking state
    }

    const RootNavigator = createSwitchNavigator(
      { Login: LoginScreen, Main: BottomTabNavigator },
      { initialRouteName: this.state.initialRoute }
    );

    const AppContainer = createAppContainer(RootNavigator);
    return <AppContainer />;
  }
}

export default App;

内容的提问来源于stack exchange，提问作者vaibhav gadekar