如何使用react-navigation更新React-Native中的标签栏徽章而不重新加载导航？

Question

我正在开发一个 React-Native 应用程序，并希望开始添加一些额外的功能，例如用于未读通知和消息计数的选项卡栏徽章。

我在标签栏上使用反应导航，在状态存储上使用 redux。我的通知和消息中有未读计数，我正在检索并使用它来显示导航器中当前的选项卡栏徽章。

我遇到的问题是，如果用户点击消息或通知（将其标记为已读），我想减少未读计数。当我这样做时，它会重新加载导航，将用户从当前所在的屏幕返回到主导航。

我创建了一个小吃来显示问题，让通知和消息详细信息屏幕有一个减少未读计数的按钮。

如何让用户保持在当前屏幕上，同时更新选项卡栏上的徽章？

Answer 1

我不确定这是否是“最佳实践”，但我还可以通过在屏幕组件内的

setOptions()

属性上使用

navigation

来手动更新徽章计数。每当状态变量

count

发生变化时，此代码片段都会更新徽章计数。

useEffect(() => {
    navigation.setOptions({
      tabBarBadge: count,
    });
  }, [navigation, count]);

Answer 2

您正在

AppNavigator

组件内创建组件。你需要把它们移到外面。

有时您可能已经注意到，您的屏幕会卸载/重新安装，或者您的本地组件状态或导航状态会在您导航时重置。如果您在渲染期间创建 React 组件，则可能会发生这种情况。

Answer 3

0
投票

最健康的方法是使用上下文