如何在标签导航器上删除上一个屏幕-React Navigation v5

Question

我具有以下标签导航器：

const RootTabNavigator: React.FC = () => (
  <RootTab.Navigator
    initialRouteName={GROUPS_STACK}
    tabBarOptions={rootTabNavigatorOptions}
  >
    <RootTab.Screen
      name={GROUPS_STACK}
      component={Groups}
      options={{ tabBarLabel: i18n.t("tabs.groups") }}
      listeners={tabBarGroupsListener}
    />

    <RootTab.Screen
      name={EVENTS_STACK}
      component={Events}
      options={{ tabBarLabel: i18n.t("tabs.events") }}
      listeners={tabBarEventsListener}
    />

    <RootTab.Screen
      name={INVITE_FRIENDS_STACK}
      component={InviteFriends}
      options={{ tabBarLabel: i18n.t("tabs.friends") }}
      listeners={tabBarFriendsListener}
    />
  </RootTab.Navigator>
);

而且我想在按选项卡时重设堆栈

例如，当我按下Groups标签时，它应该重置GroupsStack

我该如何实现？

我采用的方法是听tabPress，然后导航到相应的导航器

<RootTab.Screen
  name={INVITE_FRIENDS_STACK}
  component={InviteFriends}
  options={{ tabBarLabel: i18n.t("tabs.friends") }}
  listeners={tabBarFriendsListener}
/>

/**
 * Navigation listener for the friends tab bar
 */
export const tabBarFriendsListener = ({
  navigation,
}: ListenersParameters): ScreenListeners<NavigationState, EventMapBase> => ({
  tabPress: () => {
    navigation.popToTop();

    navigation.navigate(INVITE_FRIENDS_SCREEN);
  },
});

popToTop方法返回到堆栈中的第一个屏幕

但是我不知道要防止这种警告

Answer 1

考虑使用导航事件，也许您可​​以使用诸如focus之类的东西（当屏幕聚焦时会发出此事件）
This documentation link will help you understand better

U也可以尝试使用StackActions：
您需要：从'@ react-navigation / native'导入{StackActions};
然后尝试使用：navigation.dispatch（StackActions.popToTop（））
将其用于需要刷新的任何堆栈

Answer 2

在按下Tab键时如何重置路线？

export const tabBarFriendsListener = ({navigation,route}) => ({
  tabPress: (e) => {
     navigation.dispatch(CommonActions.reset({ index: 0, routes: [{ name: route.name}] })
  );
  },
});

文档：https://reactnavigation.org/docs/navigation-actions/#reset