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

Question

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

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);
  });
};

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

Answer 1

添加导航事件侦听器的最佳实践是设置一个常量来捕获

addListener()

的返回值，然后返回该值，所有这些都在

useEffect

调用内进行。每当导航框架需要清理效果时，就会自动调用该

unsubscribe

函数。这应该可以防止您多次调用同一个事件侦听器。

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    console.debug('focus');
    setPollingId(window.setInterval(() => loadList(activeTab), 60000));
  });
  return unsubscribe;
}, []);

然后，对模糊事件执行类似的操作：

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