React.js是否有@react-navigation/native替代库？如何实现useIsFocused功能？

一、自定义实现类似 useIsFocused 的钩子 #

在Web环境中，页面的"聚焦"状态对应浏览器标签页是否处于活跃状态，你可以通过监听window的focus和blur事件，结合React状态管理实现和React Native useIsFocused一致的功能：

import { useState, useEffect } from 'react';

function useIsFocused() {
  // 初始状态取当前页面是否聚焦
  const [isFocused, setIsFocused] = useState(document.hasFocus());

  useEffect(() => {
    const handleFocus = () => setIsFocused(true);
    const handleBlur = () => setIsFocused(false);

    // 绑定事件监听
    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return isFocused;
}

使用方式：

function MyComponent() {
  const isFocused = useIsFocused();

  return <div>当前页面是否聚焦：{isFocused ? '是' : '否'}</div>;
}

二、让 useEffect 在页面每次获焦时运行 #

直接在useEffect中监听window的focus事件，就能在页面每次获得焦点时执行指定逻辑：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handlePageFocus = () => {
      // 这里写页面获焦时需要执行的逻辑
      console.log('页面已获得焦点，执行更新操作');
      // 比如重新拉取数据、更新状态等
    };

    // 添加事件监听
    window.addEventListener('focus', handlePageFocus);

    // 可选：组件挂载时如果页面已经聚焦，立即执行一次逻辑
    if (document.hasFocus()) {
      handlePageFocus();
    }

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('focus', handlePageFocus);
    };
  }, []); // 空依赖确保只绑定一次监听

  return <div>组件内容</div>;
}

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