如何在失去焦点时取消计时器或信号选项卡(React Native App)



我正在使用React Native构建一个应用程序,该应用程序具有选项卡式界面,使用createBottomTabNavigator()(@React navigation/bottom-tabs(实现。其中一个选项卡可以有循环行为,由用户决定:播放一个声音,暂停,然后播放列表中的下一个声音。循环基本上有三种状态:播放、睡眠和获取下一个声音。

如果选项卡处于活动状态,并且用户打开了循环,当他们导航离开时,我没有办法优雅地停止循环。我把声音对象放在一个共享上下文中,当活动选项卡切换时,底部选项卡导航器会停止声音,soundObject.stopAsync(),但如果代码完成时处于睡眠状态,它不知道它不再有焦点,它会获取下一个声音并继续循环。

必须有一种更干净的方法来停止计时器,或者提醒循环代码在计时器完成时不应该继续,但我不知道它是什么。很乐意粘贴你想要的代码,但我认为我的方法是错误的。

您可以使用react-navigation库提供的钩子。

您可以使用useIsFocused挂钩,它返回一个布尔值,指示屏幕是否聚焦,您可以访问循环中的某个位置来决定是否应该继续。

或者还有useFocusEffect,它也可以用于您的用例:

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

当我们试图在页面未聚焦时停止某些操作时,例如停止播放视频或音频文件,或停止跟踪用户位置时,这一功能特别方便。

https://reactnavigation.org/docs/function-after-focusing-screen/

最新更新