React Navigation v6：如何检测屏幕进入/失去焦点状态？

在React Navigation v6中，你可以根据组件类型（函数组件/类组件）选择以下方案，实现与v4中withNavigationFocus + componentDidUpdate完全一致的效果：

函数组件方案 #

方案1：精准检测焦点切换（useIsFocused + useRef + useEffect） #

通过保存上一次的焦点状态，精准捕获从失焦到聚焦的瞬间：

import { useIsFocused } from '@react-navigation/native';
import { useEffect, useRef } from 'react';

function YourScreen() {
  const isFocused = useIsFocused();
  // 用ref保存上一次的焦点状态
  const wasFocused = useRef(isFocused);

  useEffect(() => {
    // 判断：上一次失焦，当前聚焦
    if (!wasFocused.current && isFocused) {
      // 这里写入你需要触发的业务逻辑
      console.log('屏幕从失焦切换为聚焦');
    }
    // 更新ref的状态，用于下次判断
    wasFocused.current = isFocused;
  }, [isFocused]);

  return (
    // 你的组件渲染内容
  );
}

方案2：简洁的聚焦触发（useFocusEffect） #

useFocusEffect是v6提供的专用钩子，会在屏幕首次挂载和每次从其他屏幕切换回来聚焦时自动触发，可直接替代原有逻辑：

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

function YourScreen() {
  useFocusEffect(
    useCallback(() => {
      // 屏幕聚焦时执行的逻辑（包含切换回来的场景）
      console.log('屏幕已聚焦');

      // 可选：返回清理函数，在屏幕失焦时执行
      return () => {
        console.log('屏幕已失焦');
      };
    }, []) // 依赖项为空时，仅在聚焦状态变化时触发
  );

  return (
    // 你的组件渲染内容
  );
}

类组件方案 #

React Navigation v6移除了官方的withNavigationFocus高阶组件，你可以自行封装一个完全兼容的版本：

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

// 自定义高阶组件，向类组件注入isFocused属性
const withNavigationFocus = Component => props => {
  const isFocused = useIsFocused();
  return <Component {...props} isFocused={isFocused} />;
};

// 类组件使用方式与v4完全一致
class YourScreen extends React.Component {
  componentDidUpdate(prevProps) {
    if (!prevProps.isFocused && this.props.isFocused) {
      // 触发从失焦到聚焦的逻辑
      console.log('屏幕刚刚获得焦点');
    }
  }

  render() {
    return (
      // 你的组件渲染内容
    );
  }
}

export default withNavigationFocus(YourScreen);

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