在 react native 中，使用 react navigation 时需在屏幕获得焦点（即完成导航、即将渲染）时触发数据获取等操作，推荐通过 navigation.addlistener('focus') 实现，避免依赖不稳定的挂载时机。
在 react native 中，使用 react navigation 时需在屏幕获得焦点（即完成导航、即将渲染）时触发数据获取等操作，推荐通过 navigation.addlistener('focus') 实现，避免依赖不稳定的挂载时机。
在 React Native 的导航场景中，“组件挂载前渲染”这一表述存在概念混淆——React 组件必须先挂载（mount）才能渲染（render），而开发者真正需要的是导航动作完成、目标屏幕已激活且即将显示时的可靠回调时机。此时 useEffect 的默认行为（组件挂载后执行）并不总能保证数据已就绪，尤其在 Tab + Stack 混合导航中，屏幕可能被缓存复用（如从 Tabs 切换再返回），导致 useEffect 仅在首次挂载时触发，无法响应每次导航进入。
✅ 正确方案是监听 focus 生命周期事件：它在屏幕成为导航栈顶部、获得用户焦点时每次都会触发，无论组件是首次挂载还是从后台恢复，语义精准且符合预期。
以下是在 MessagesScreen.jsx 中安全执行导航后逻辑（如远程数据拉取）的标准写法：
import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';
function MessagesScreen() {
const navigation = useNavigation();
const route = useRoute();
const { chatId } = route.params ?? {};
React.useEffect(() => {
// ✅ focus 事件确保：导航完成、屏幕可见、参数可用
const unsubscribe = navigation.addListener('focus', () => {
if (chatId) {
console.log(`Fetching messages for chat ID: ${chatId}`);
// 示例：触发 API 请求、更新状态、预加载资源等
// fetchData(chatId).then(setMessages);
}
});
// ? 自动清理监听器，防止内存泄漏
return unsubscribe;
}, [navigation, chatId]);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Messages Screen for Chat {chatId}</Text>
{/* 实际项目中可在此处添加加载态或消息列表 */}
</View>
);
}
export default MessagesScreen;⚠️ 注意事项：
- 不要使用 componentDidMount 或 useEffect 空依赖数组（[]）替代 focus：它们无法捕获 Tab 切换、返回等场景下的重复进入；
- focus 在组件卸载后不会触发，因此无需额外判断挂载状态（如 isMounted）；
- 若需在屏幕失焦时清理副作用（如取消请求、暂停轮询），可同时监听 'blur' 事件；
- route.params 在 focus 回调中始终可用，但建议做空值校验（如 ?? {}），避免因导航未携带参数导致运行时错误。
总结：navigation.addListener('focus') 是 React Navigation 官方推荐的、语义明确且健壮的生命周期钩子，适用于所有需要“每次进入屏幕即执行”的场景——从初始化数据、重置表单，到启动动画、恢复播放器，均应优先选用该模式，而非试图在 render 前“拦截”或依赖不可靠的挂载顺序。
