React Navigation中如何让Navigator重新挂载以更新数据？

针对你遇到的登出后重新登录时Navigator未重新挂载导致数据未刷新的问题，有以下几种可行方案，不需要局限于在卸载的屏幕组件中执行数据获取：

1. 监听登录状态变化，触发数据重新获取 #

从你的AuthProvider中获取用户登录状态（比如当前用户实例），将其作为useEffect的依赖项。当用户登出后重新登录，登录状态发生变化时，会自动触发useEffect重新执行数据获取逻辑。

修改MyStack的代码：

import { useContext } from 'react';
import { AuthContext } from '../path/to/AuthProvider';

const MyStack = () => {
  const { user } = useContext(AuthContext);

  useEffect(() => {
    // 仅当用户存在时获取数据
    if (user) {
      // 执行你的通知数据获取逻辑
      fetchNotifications();
    } else {
      // 用户登出时清空旧数据
      clearNotifications();
    }
  }, [user]) // 依赖项设为user，状态变化时重新执行

  // ... 其他代码
}

2. 在全局状态中管理数据获取逻辑 #

将通知数据的获取逻辑移到AuthProvider或NotificationsProvider中，在登录状态切换时主动触发数据更新。这样MyStack只需订阅状态即可，无需自己处理获取逻辑。

修改AuthProvider的核心逻辑示例：

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [notifications, setNotifications] = useState([]);

  const fetchNotifications = async () => {
    if (!user) return;
    const res = await fetch(`/api/notifications?userId=${user.id}`);
    const data = await res.json();
    setNotifications(data);
  };

  // 登录成功后设置用户并获取通知
  const login = async (credentials) => {
    const userData = await api.login(credentials);
    setUser(userData);
    await fetchNotifications();
  };

  // 登出时清空用户和通知
  const logout = () => {
    setUser(null);
    setNotifications([]);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout, notifications }}>
      {children}
    </AuthContext.Provider>
  );
};

之后在MyStack或任意需要通知数据的组件中，直接从AuthContext读取notifications即可，无需自己处理获取逻辑。

3. 手动触发导航栈重置 #

当用户登录成功后，调用导航的reset方法，重置整个导航栈，让MyStack重新挂载，从而触发初始的useEffect执行。

示例代码（在登录成功的回调中）：

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

// 登录成功后执行
navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ name: 'Home' }], // 替换为你的首页路由名称
  })
);

这种方式会让导航栈完全重置，MyStack会重新挂载，初始的useEffect会再次执行，获取最新数据。

4. 使用导航事件监听 #

利用React Navigation的导航事件，监听用户进入应用主栈的事件，每次进入时触发数据刷新。

在MyStack中添加事件监听：

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

const MyStack = () => {
  const navigation = useNavigation();

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // 每次栈被聚焦时获取数据
      fetchNotifications();
    });

    return unsubscribe;
  }, [navigation])

  // ... 其他代码
}

这种方式适合需要每次进入页面都刷新数据的场景，但如果是全局通知数据，可能不如监听登录状态高效。

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