React Navigation v6中@react-navigation/native的withNavigationFocus替代方案

一、官方推荐的替代方案 #

从React Navigation 5.x版本开始，withNavigationFocus高阶组件已被官方弃用，官方推荐使用更灵活的钩子函数替代：

• useIsFocused：直接获取当前屏幕的聚焦状态，返回布尔值，适用于函数组件。示例代码：

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

function MyScreen() {
  const isFocused = useIsFocused();
  return <Text>{isFocused ? '当前屏幕已聚焦' : '当前屏幕未聚焦'}</Text>;
}

• useFocusEffect：用于在屏幕聚焦时执行副作用操作（比如数据刷新），同样适用于函数组件。示例代码：

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

function MyScreen() {
  useFocusEffect(
    useCallback(() => {
      // 屏幕聚焦时执行的逻辑
      console.log('屏幕已聚焦');
      return () => {
        // 屏幕失焦时执行的清理逻辑
        console.log('屏幕已失焦');
      };
    }, [])
  );
  return <Text>我的页面</Text>;
}

如果项目中仍有类组件需要使用聚焦状态，可以通过自定义高阶组件注入状态，这也是自定义withNavigationFocus的核心思路。

二、自定义withNavigationFocus高阶组件 #

完全可以参照自定义withNavigation的方式实现withNavigationFocus，核心是利用useIsFocused钩子获取状态并传递给被包裹组件。示例代码如下：

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

const withNavigationFocus = (Component) => {
  return (props) => {
    const isFocused = useIsFocused();
    return <Component {...props} isFocused={isFocused} />;
  };
};

// 类组件中使用示例
class MyClassScreen extends React.Component {
  render() {
    return <Text>{this.props.isFocused ? '已聚焦' : '未聚焦'}</Text>;
  }
}

export default withNavigationFocus(MyClassScreen);

这个自定义HOC会把isFocused属性注入到类组件中，用法和原生withNavigationFocus完全一致，可完美适配类组件场景。

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