Hey there! As someone new to React Native, you're asking exactly the right questions to build a solid authentication flow. Let's break this down into two parts: implementing your three splash screen scenarios, and refining your existing login code.

一、首屏三种逻辑的实现思路 #

The core of your splash screen logic is checking the user's authentication state and validity as soon as the app launches. We'll combine local storage (AsyncStorage) with your backend API to make this work:

• Scenario 1: User has never logged in
  When the app starts, try to fetch saved user data (like a userToken or username) from AsyncStorage. If nothing exists, show your onboarding slides, then redirect to the registration screen once they're done.
• Scenario 2: User is logged in and valid
  If you find a saved token/username, call a backend verification API (e.g., /api/verify-user) to confirm the user exists in your database and their credentials are still valid. If the check passes, redirect straight to the user's dashboard.
• Scenario 3: User was logged in but their ID is invalid
  If the verification API returns that the user doesn't exist or their credentials are expired, clear all saved user data from AsyncStorage, show a prompt to re-login, and redirect to the login/onboarding screen.

How to check if a user exists in your database? #

This entirely depends on your backend setup, but here's the standard approach:

1. When a user logs in successfully, have your backend return a unique, secure token (like JWT) along with their user data. This token is way more reliable than just a username for verifying identity later.
2. On app launch, send this saved token to a backend verification endpoint. The backend will check if the token maps to an existing, active user in the database.
3. If you don't have token-based auth yet, you can create a simple /api/check-user endpoint that takes a username and returns whether that user exists in your system.

二、Your Login Code: Review & Optimizations #

Your code has the right core idea, but there are a few key tweaks to make it more reliable, secure, and user-friendly:

1. Key Issues in Your Current Code #

• AsyncStorage Usage:
  You're using AsyncStorage.setItem('username', this.state.username) right after setState, but setState is asynchronous. While this might work for the username (since it's user-input state), it's a bad habit—if you ever tried to save responseData values, you'd get stale state. Also, React Native's old AsyncStorage is deprecated; use @react-native-async-storage/async-storage instead.
• Timed Redirect:
  Using setTimeout to redirect is unreliable. You should redirect only after the user data is saved to AsyncStorage and state is updated. Use setState's callback function or async/await to handle this properly.
• Error Handling:
  Showing JSON.stringify(responseData) in an alert is not user-friendly. Your backend should return a human-readable error message (e.g., responseData.message) that you can display directly. Also, your catch block only logs errors—you should show a user-facing alert for network issues.
• Success Check Logic:
  Checking if(responseData.error !== 1) is fragile. Work with your backend to use clear success indicators, like responseData.success === true or a 200 status code.

2. Optimized Login Code Example #

import AsyncStorage from '@react-native-async-storage/async-storage';

// Using async/await for cleaner, more readable code
onPressLogin = async () => {
  try {
    // Make the login request
    const response = await fetch('linktomyAPI', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password,
      })
    });

    // Handle HTTP errors (like 404, 500)
    if (!response.ok) {
      throw new Error('Failed to connect to server');
    }

    const responseData = await response.json();

    // Use a clear success flag from your backend
    if (responseData.success) {
      // Save critical user data (prefer token over username for security)
      await AsyncStorage.setItem('userToken', responseData.token);
      await AsyncStorage.setItem('userId', responseData.user.id);

      // Update state THEN redirect
      this.setState({ userdetail: responseData.user }, () => {
        Actions.Authentication();
      });
    } else {
      // Show user-friendly error message
      Alert.alert('Login Failed', responseData.message || 'Incorrect username or password');
    }
  } catch (error) {
    console.log('Login Error:', error);
    // Alert user about network issues
    Alert.alert('Network Error', 'Please check your internet connection and try again');
  }
};

三、Implementing the Splash Screen Logic #

Here's how to put it all together in your splash screen component:

import AsyncStorage from '@react-native-async-storage/async-storage';

class SplashScreen extends Component {
  componentDidMount() {
    this.checkUserAuthentication();
  }

  checkUserAuthentication = async () => {
    try {
      // Get the saved user token
      const userToken = await AsyncStorage.getItem('userToken');

      if (!userToken) {
        // No token = never logged in, go to onboarding
        Actions.Onboarding();
        return;
      }

      // Verify the token with your backend
      const response = await fetch('linktomyAPI/verify-token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${userToken}` // Send token for verification
        }
      });

      const verificationData = await response.json();

      if (verificationData.success) {
        // Token is valid, go to user page
        Actions.UserPage();
      } else {
        // Token is invalid, clear data and redirect to login
        await AsyncStorage.multiRemove(['userToken', 'userId']);
        Alert.alert('Session Expired', 'Please log in again');
        Actions.Login();
      }
    } catch (error) {
      console.log('Auth Check Error:', error);
      // Network error, redirect to login
      Actions.Login();
    }
  };

  render() {
    // Show your splash screen UI here
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }
}

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