React native 如何取消定时器或信号标签，当它'；s失去焦点（React本机应用程序）

我正在使用React Native构建一个应用程序，该应用程序具有选项卡式界面，通过

CreateBoottomTabNavigator（）

（@React navigation/BottomTabs）实现。其中一个选项卡可以有一个循环行为，由用户自行决定：播放一个声音，暂停，然后播放列表中的下一个声音。循环基本上有3种状态：播放、睡眠和获取下一个声音

如果选项卡处于活动状态，并且用户打开了循环，当他们离开时，我没有办法优雅地停止循环。我求助于将声音对象放在共享上下文中，当活动选项卡切换时，底部选项卡导航器停止声音，

soundObject.stopsync（）

，但是如果代码完成时处于休眠状态，它不知道它不再有焦点，它会获取下一个声音并继续循环

---

必须有一种更干净的方法来停止计时器或警告循环代码，当计时器完成时，它不应该继续，但我不知道它是什么。很高兴粘贴尽可能多的代码，但我认为我的方法是错误的。

您可以使用

react导航

库提供的挂钩

您可以使用

useIsFocused

hook，它返回一个布尔值，指示屏幕是否聚焦，您可以访问循环中的某个位置来决定是否继续

另外还有

useFocusEffect

，它也适用于您的用例：

React Navigation提供了一个钩子，当屏幕进入焦点时运行一个效果，当屏幕失去焦点时进行清理。这对于添加事件监听器、在屏幕聚焦时使用API调用获取数据或在屏幕进入视图后需要执行的任何其他操作都非常有用

当我们试图在页面未聚焦的情况下停止某些操作（如停止播放视频或音频文件，或停止跟踪用户位置）时，这尤其方便

---

我错过的是useIsFocused（）的相关性。文档提到“屏幕”有焦点，我认为应用程序失去了焦点。哦。非常感谢。