在 React Native 中，当用户通过导航跳转到新页面时，需在组件“获得焦点但尚未渲染完成”前执行数据获取等初始化操作，推荐使用 navigation.addListener('focus') 实现精准时机控制。
在 react native 中，当用户通过导航跳转到新页面时，需在组件“获得焦点但尚未渲染完成”前执行数据获取等初始化操作，推荐使用 `navigation.addlistener('focus')` 实现精准时机控制。
在 React Navigation（v5/v6）中，组件挂载（mount）与屏幕可见性并非完全同步——尤其在 Tab Navigator 或 Stack Navigator 的复杂嵌套下，useEffect(() => {}, [])（即组件挂载时执行）可能过早（如目标屏幕尚未激活），也可能过晚（如因路由缓存导致实际渲染延迟）。真正符合“导航完成、屏幕即将显示”语义的生命周期事件是 focus。
该事件在屏幕成为当前活跃视图时触发，保证了：
- 用户已成功导航至此屏幕；
- 导航动画基本完成，UI 即将呈现；
- 可安全发起 API 请求、更新状态、启动定时器等副作用操作。
✅ 正确用法：监听 focus 事件
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(() => {
// ✅ 在屏幕获得焦点时执行初始化逻辑
const fetchMessages = async () => {
if (!chatId) return;
try {
// 模拟 API 调用
const response = await fetch(`/api/chats/${chatId}/messages`);
const messages = await response.json();
// 更新状态（需配合 useState 或 Redux）
console.log('Fetched messages:', messages);
} catch (err) {
console.error('Failed to load messages:', err);
}
};
const unsubscribe = navigation.addListener('focus', () => {
console.log('MessagesScreen is now focused — initiating data fetch');
fetchMessages();
});
// ? 自动清理：组件卸载或失焦时移除监听（React Navigation 自动处理失焦，但显式清理更健壮）
return unsubscribe;
}, [navigation, chatId]);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Messages for Chat ID: {chatId}</Text>
{/* 实际项目中可在此处添加加载态或消息列表 */}
</View>
);
}
export default MessagesScreen;⚠️ 注意事项与最佳实践
- 不要用 useEffect 空依赖数组替代 focus：useEffect(() => {}, []) 在组件首次挂载时触发，但若屏幕被缓存（如 Tab 切换返回），它不会再次执行；而 focus 每次进入该屏幕都会触发，语义更准确。
- 避免重复请求：若逻辑中包含异步操作（如 fetch），建议结合 AbortController 或状态标记（如 isFetching）防止快速切屏导致的并发请求。
- 参数安全访问：始终通过 useRoute().params 获取导航参数，并做空值校验（如 route.params?.chatId），避免因未传参导致崩溃。
- 性能考量：focus 事件频繁触发（如反复切换 Tab），确保内部逻辑轻量；高频更新场景建议搭配防抖或节流。
- 兼容性提示：focus 事件在 @react-navigation/native v5+ 全面支持，旧版需升级；不适用于原生 ComponentDidMount 等纯 React 生命周期。
✅ 总结
navigation.addListener('focus') 是 React Native 中响应“导航完成、屏幕即将展示”这一关键时机的标准且可靠方案。它解耦了渲染生命周期与导航语义，使数据加载、分析上报、权限检查等逻辑能精准对齐用户意图，是构建健壮、可维护导航体验的必备实践。
