javascript - 如何正确处理 React Native Navigation 中的模糊和焦点？

Question

我在一个由 2 个选项卡组成的 React Native 应用程序中有一个屏幕。每次我切换选项卡时，我都想与我的服务器启动轮询操作以获取选项卡的内容。我通过这样做来实现这一目标：

const [pollingId, setPollingId] = useState<number>(0);

useEffect(() => {
  clearInterval(pollingId);
  setPollingId(window.setInterval(() => loadList(activeTab), 60000));
}, [activeTab]);

这很好用。

当我在另一个屏幕上导航时，问题就开始了：我想要做的是：

• 停止投票（无论是什么）
• 导航到第二个屏幕
• 当我返回 2 个选项卡屏幕时，必须重新启动轮询

但是当我这样做的时候navigation.navigate("Screen2")，第一个屏幕没有被卸载，所以我不能把它放在clearInterval(pollingId)返回useEffect函数中。

我试图通过执行以下操作来使用 React Navigation 的模糊和焦点事件：

const subscribe = () => {
  navigation.addListener('focus', () => {
  console.debug('focus');
    setPollingId(window.setInterval(() => loadList(activeTab), 60000));
  });
};

const unsubscribe = () => {
  navigation.addListener('blur', () => {
    console.debug('blur');
    clearInterval(pollingId);
  });
};

但是，如果我继续前进和后退，这会导致事件相互叠加。做我无法做的事情的最佳做法是什么？

标签： javascriptreactjsreact-nativereact-navigation