React Native应用退出后重开如何回到退出前页面并保留页面状态

核心思路是通过轻量持久化存储保存最后访问的路由和对应页面状态，应用启动时读取存储内容直接初始化到对应页面即可，具体实现步骤如下：

1. 引入持久化存储依赖 #

推荐使用社区维护的@react-native-async-storage/async-storage，足够满足轻量JSON数据的持久化需求，安装后完成原生端配置即可使用。

2. 监听路由变化，持久化目标页面信息 #

以常用的react-navigation 6.x路由库为例，在导航容器的路由变化回调中监听页面切换，匹配到第五页时存储当前路由和页面状态：

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

// 导航容器配置
<NavigationContainer
  onStateChange={async (state) => {
    if (!state) return;
    const currentRoute = state.routes[state.index];
    // 匹配到第五页时存储状态
    if (currentRoute.name === 'FifthPage') {
      const saveData = {
        lastRoute: 'FifthPage',
        // yourFifthPageState为第五页需要保留的所有状态集合，可从全局状态管理或当前页面导出
        pageState: yourFifthPageState
      };
      await AsyncStorage.setItem('appLastLaunchInfo', JSON.stringify(saveData));
    } else {
      // 非第五页可根据需求选择清除存储或保留历史状态
      await AsyncStorage.removeItem('appLastLaunchInfo');
    }
  }}
>
  {/* 你的路由栈配置 */}
</NavigationContainer>

3. 应用启动时读取存储，设置初始路由 #

应用入口初始化阶段先读取持久化内容，根据存储内容设置导航初始路由：

import { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const App = () => {
  const [initialRoute, setInitialRoute] = useState('FirstPage'); // 默认初始页为第一页
  const [savedFifthPageState, setSavedFifthPageState] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const initLaunchInfo = async () => {
      const savedInfo = await AsyncStorage.getItem('appLastLaunchInfo');
      if (savedInfo) {
        const { lastRoute, pageState } = JSON.parse(savedInfo);
        setInitialRoute(lastRoute);
        setSavedFifthPageState(pageState);
      }
      setIsLoading(false);
    };
    initLaunchInfo();
  }, []);

  // 初始化完成前不渲染导航，避免页面闪跳
  if (isLoading) return null;

  return (
    <NavigationContainer initialRouteName={initialRoute}>
      <Stack.Screen name="FirstPage" component={FirstPage} />
      <Stack.Screen name="SecondPage" component={SecondPage} />
      <Stack.Screen name="ThirdPage" component={ThirdPage} />
      <Stack.Screen name="FourthPage" component={FourthPage} />
      <Stack.Screen 
        name="FifthPage" 
        component={FifthPage}
        // 把存储的状态通过路由参数传给第五页
        initialParams={{ savedState: savedFifthPageState }}
      />
    </NavigationContainer>
  );
};

4. 第五页恢复存储的状态 #

在第五页组件中读取路由传入的存储状态，作为组件初始状态即可：

const FifthPage = ({ route }) => {
  // 优先使用存储的状态，没有的话用默认初始值
  const [formData, setFormData] = useState(route.params?.savedState?.formData || {});
  const [inputText, setInputText] = useState(route.params?.savedState?.inputText || '');
  const [checkedStatus, setCheckedStatus] = useState(route.params?.savedState?.checkedStatus || false);

  // 后续业务逻辑正常编写即可
};

注意事项：

• 如果第五页状态比较复杂，建议搭配全局状态管理库（Zustand/Redux/MobX）使用，持久化时直接存储对应状态模块的内容，恢复时直接替换全局状态即可，无需走路由传参，维护成本更低
• 敏感类数据不要明文存在AsyncStorage中，如需存储要做加密处理
• 如果用户主动清理应用缓存/存储权限被回收，持久化内容会丢失，这种情况默认走初始首页逻辑即可，无需额外兼容

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