如何检测@react-navigation/bottom-tabs 中的标签焦点变化？

Question

我在我的 react-native 项目中使用 @react-navigation/bottom-tabs.. 共有三个标签

| Home | Add | List |

所有这些屏幕都应该使用 3 个不同的 API 获取数据并在用户访问这些选项卡时显示它。但问题是我如何检测选项卡何时获得焦点？

我尝试使用 useIsFocused()，但它不起作用... 假设我在 Home-screen 中有一个 API 调用 GetStudentsName() ，并且我希望它在用户访问 HomeTab 时运行... .但是当我点击添加标签时，这个GetStudentsName() Api也会被调用！...

如何仅在选项卡获得焦点时限制此 api 调用，而不是在选项卡失去焦点时限制？

请提供基于钩子的解决方案，而不是基于类

Answer 1

React Navigation 提供了一个事件处理程序，用于在用户点击底部选项卡图标或按钮时调度事件。

  React.useEffect(() => {
    const unsubscribe = navigation.addListener("tabPress", async (e) => {
     // add your business logic here

// Unsubscribe to event listener when component unmount
 return () => unsubscribe();
  }, [ navigation]);