React Native（Expo+React-Navigation）重载后能否回到当前嵌套页面？

Absolutely! You can absolutely set up your Expo + React Navigation app to reload and jump right back to your current deep-nested screen—this is such a time-saver during development. Let’s break down how to do it, plus answer your broader question about React Native’s support for this behavior.

Persist Navigation State to Survive Reloads #

React Navigation has built-in tools for persisting navigation state, and when combined with a persistent storage solution (like AsyncStorage), you can make your app remember exactly where you were before a reload.

Step 1: Set Up Dependencies #

First, make sure you have AsyncStorage installed (Expo supports this out of the box with a quick install):

npx expo install @react-native-async-storage/async-storage

Step 2: Add State Persistence to Your Navigation Container #

Modify your root navigation component to save and load the navigation state:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { useState, useEffect } from 'react';

// Load saved navigation state from AsyncStorage
const loadNavigationState = async () => {
  try {
    const savedState = await AsyncStorage.getItem('appNavigationState');
    return savedState ? JSON.parse(savedState) : undefined;
  } catch (error) {
    console.warn('Failed to load navigation state:', error);
    return undefined;
  }
};

// Save navigation state whenever it changes
const saveNavigationState = async (state) => {
  try {
    await AsyncStorage.setItem('appNavigationState', JSON.stringify(state));
  } catch (error) {
    console.warn('Failed to save navigation state:', error);
  }
};

export default function App() {
  const [initialNavState, setInitialNavState] = useState();

  // Load saved state on app mount
  useEffect(() => {
    loadNavigationState().then(state => {
      if (state) setInitialNavState(state);
    });
  }, []);

  return (
    <NavigationContainer
      initialState={initialNavState}
      // Only persist state in development (optional but recommended)
      onStateChange={(state) => __DEV__ && saveNavigationState(state)}
    >
      {/* Your navigator stack/tabs/drawer goes here */}
    </NavigationContainer>
  );
}

Step 3: Handle Edge Cases #

• If you modify your navigator structure (like adding/removing screens), the saved state might become invalid. Add a check in loadNavigationState to reset the state if it doesn’t match your current navigator setup, or just let the NavigationContainer fall back to the default initial screen automatically.
• For production, you might want to disable this persistence (or use a more secure storage like SecureStore) unless you want users to resume their session after closing/reopening the app.

Does React Native Support Staying on the Current Page After Reload? #

React Native itself doesn’t handle this out of the box—reloading the app (whether via Fast Refresh or a full reload) resets the app’s in-memory state entirely. However, by persisting critical state (like navigation) to a persistent storage layer, you can recreate the exact screen and state after a reload.

• Fast Refresh: Expo’s default Fast Refresh often preserves your current screen without full state persistence, especially for minor code changes. But if you make changes that trigger a full reload (like editing app.json or native modules), the persistence setup above will ensure you land back where you were.
• Full Reloads: For full app reloads (e.g., from the Expo dev menu), the state persistence is essential to restore your current screen.

With this setup, you’ll never have to manually navigate back to your deep-nested test screen after making changes again—total development efficiency win!

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