React Native登出后屏幕残留旧数据无法清除问题

你的代码存在两个核心问题，直接导致旧账号数据残留：

• 执行顺序错误：先执行页面跳转再清理本地存储，跳转动作触发后原有业务页面不会立刻销毁，清理存储的操作无法触发旧页面的数据重置逻辑。
• 导航调用方式错误：navigation.navigate('Login') 只会把登录页压入导航栈顶，之前加载过的业务页面实例会完整保留在栈中，新账号登录后返回业务页时会直接复用未销毁的旧实例，不会重新触发页面挂载、数据拉取的生命周期，因此直接显示残留的旧数据。

1. 修正登出逻辑的执行顺序与导航调用 #

先清理本地存储，再通过重置导航栈的方式彻底销毁所有旧业务页面实例，从根源上避免旧页面复用：

<Button
  title={'Logout'}
  style={styles.marginButton}
  onPress={async () => {
    // 先清空本地存储的账号相关数据
    await AsyncStorage.clear();
    // 重置导航栈，清空所有历史页面，仅保留登录页作为栈根
    navigation.reset({
      index: 0,
      routes: [{ name: 'Login' }],
    });
  }}>
</Button>

2. 增加页面聚焦时的账号校验（兜底方案） #

为了避免极端场景下的串号问题，可以在业务页面增加聚焦监听，每次页面进入前台时校验当前登录账号和页面缓存的账号是否一致，不一致则清空旧状态、重新拉取新账号数据：

import { useFocusEffect } from '@react-navigation/native';

// 业务页面组件内使用
useFocusEffect(
  React.useCallback(() => {
    const initPageData = async () => {
      const currentUserId = await AsyncStorage.getItem('currentUserId');
      // 账号不匹配时清空旧数据，重新拉取
      if (currentUserId !== cachedUserIdRef.current) {
        setPageData(undefined); // 清空页面旧状态
        cachedUserIdRef.current = currentUserId;
        await loadUserData(currentUserId); // 拉取新账号对应数据
      }
    };
    initPageData();
  }, [])
);

注意：只要旧业务页面实例没有被销毁，组件内部维护的state、接口缓存数据就不会自动清空，仅靠切换页面触发重渲染无法彻底解决数据残留问题，必须从导航栈销毁、状态主动重置两个层面处理。

内容的提问来源于stack exchange，提问作者Nguyen Huu Thang