当您从另一个标签页返回标签页时，如何重置标签页堆栈反应导航v5

问题描述

我有3个标签，每个标签包含一组堆栈导航器。

1. 主页堆栈

    const HomeNavigator = createStackNavigator();

    const HomeStackNavigator = ({navigation,route}) => {
      return (
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name="Home"
            component={Home}
          />
          <HomeNavigator.Screen
            name="Profile"
            component={Profile}
          />
          <HomeNavigator.Screen
            name="Settings"
            component={Settings}
          />
        </HomeNavigator.Navigator>
      );
    };

1. 商店堆栈

    const StoreNavigator = createStackNavigator();

    const StoreStackNavigator = ({navigation,route}) => {
      return (
        <StoreNavigator.Navigator>
          <StoreNavigator.Screen
            name="OurStore"
            component={Store}
          />
        </StoreNavigator.Navigator>
      );
    };

1. 社区堆栈

    const CommunityNavigator = createStackNavigator();

    const CommunityStackNavigator = ({navigation,route}) => {
      return (
        <CommunityNavigator.Navigator>
          <CommunityNavigator.Screen
            name="Community"
            component={Community}
          />
          <CommunityNavigator.Screen
            name="CommunityReply"
            component={CommunityReply}
            options={communityReplyOptions}
          />
          <CommunityNavigator.Screen
            name="AskCommunity"
            component={AskCommunity}
          />
        </CommunityNavigator.Navigator>
      );
    };

Tab Navigator

    const MainNavigator = createBottomTabNavigator();

    const MainTabNavigator = () => {
      return (
        <MainNavigator.Navigator
          screenoptions={tabScreenoptions}
          tabBarOptions={tabBarOptions}>
          <MainNavigator.Screen
            name="HoMetab"
            component={HomeStackNavigator}
            options={{tabBarLabel: 'Home'}}
          />
          <MainNavigator.Screen
            name="StoreTab"
            component={StoreStackNavigator}
            options={{tabBarLabel: 'Store'}}
          />
          <MainNavigator.Screen
            name="CommunityTab"
            component={CommunityStackNavigator}
            options={{tabBarLabel: 'Community'}}
          />
        </MainNavigator.Navigator>
      );
    };

通过使用以下方法单击按钮，导航到HoMetab的CommunityTab选项卡中的CommunityReply屏幕

props.navigation.navigate（'CommunityTab'，{ 屏幕：“ CommunityReply”， 参数：{postId：postId}， }）;

一切正常，当我再次回到CommunityTab时，它将始终处于CommunityReply屏幕中。回到CommunityTab选项卡时如何重置选项卡堆栈

反应导航版本

“ @ react-navigation / bottom-tabs”：“ ^ 5.8.0”

“ @ react-navigation / native”：“ ^ 5.7.3”

“ @ react-navigation / stack”：“ ^ 5.9.0”

解决方法

为此目的设计了一个名为unmountOnBlur的属性。

https://reactnavigation.org/docs/bottom-tab-navigator#unmountonblur

要在 Tab Navigator 中进行的更改：

const MainNavigator = createBottomTabNavigator();

const MainTabNavigator = () => {
  return (
    <MainNavigator.Navigator
-     screenOptions={tabScreenOptions}
+     screenOptions={{...tabScreenOptions,unmountOnBlur: true }}
      tabBarOptions={tabBarOptions}>
      <MainNavigator.Screen
        name="HomeTab"
        component={HomeStackNavigator}
        options={{tabBarLabel: 'Home'}}
      />
      <MainNavigator.Screen
        name="StoreTab"
        component={StoreStackNavigator}
        options={{tabBarLabel: 'Store'}}
      />
      <MainNavigator.Screen
        name="CommunityTab"
        component={CommunityStackNavigator}
        options={{tabBarLabel: 'Community'}}
      />
    </MainNavigator.Navigator>
  );
};

,

如果上述解决方案对您不起作用，请尝试此解决方案，它对我有用。

import { CommonActions } from '@react-navigation/native';

<Tab.Screen listeners={({navigation,route})=>({
    blur:()=>{
      navigation.dispatch(
        CommonActions.reset({
          index:4,routes:[{name:'Profile'}]
        })
      )
    },})} name="Profile"/>