如何在不重新加载导航的情况下使用反应导航更新 React-Native 中的标签栏徽章?

How do I update the tab bar badge in React-Native using react-navigation without the navigation being reloaded?

我正在开发 React-Native 应用程序,想开始添加一些额外的功能,例如用于未读通知和消息计数的标签栏徽章。

我正在为标签栏使用 react-navigation,为我的 state store 使用 redux。我的通知和消息中有一个未读计数,表明我正在检索并使用它来显示当前在导航器中的标签栏徽章。

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

我通过在通知和消息详细信息屏幕上有一个按钮来减少未读计数来创建一个显示问题的快餐。

https://snack.expo.dev/@simplytrak/tab-bar-badges

如何让用户保持在当前屏幕上,同时更新标签栏上的徽章?

您正在 AppNavigator 组件中创建组件。你需要把它们移到外面。

Sometimes you might have noticed that your screens unmount/remount, or your local component state or the navigation state resets when you navigate. This might happen if you are creating React components during render.

https://reactnavigation.org/docs/troubleshooting/#screens-are-unmountingremounting-during-navigation