我有以下路线结构:

StackNavigator 
-StackNavigator 
-TabNavigator 
--Tab1 
---Route 1 (Stack) (initial) 
---Route 2 (Stack) 
 
--Tab2 
---Route 3 (Stack) (initial) 
---Route 4 (Stack) 

当我访问Tab1 -> Route 1 -> Route 2 -> Tab2时并返回Tab1 ，事件路由为 2，而不是 initialRoute 1.

我正在执行以下操作:

tabBarOnPress: ({ scene }) => { 
    const { route } = scene; 
    const tabRoute = route.routeName; 
    const { routeName } = route.routes[0]; 
 
    navigation.dispatch(NavigationActions.navigate({ routeName: tabRoute })); 
 
    navigation.dispatch(NavigationActions.reset({ 
        index: 0, 
        actions: [ 
            NavigationActions.navigate({ routeName }), 
        ], 
    })); 
}, 

但问题是它首先显示 Route 2然后导航至Route 1 .

如何重置以前的选项卡/屏幕，以便当我切换选项卡时始终直接显示初始路线。

请您参考如下方法:

版本 5.x.x 和版本 6.x.x 的解决方案:

将监听器传递给屏幕组件:

<Tab.Screen 
     name="homeTab" 
     component={HomeStackScreen} 
     listeners={tabBarListeners} 
/> 

然后在此监听器上，每次用户按下选项卡时导航用户:

const tabBarListeners = ({ navigation, route }) => ({ 
    tabPress: () => navigation.navigate(route.name), 
}); 

鸣谢:https://github.com/react-navigation/react-navigation/issues/8583

版本 4.x.x 的解决方案:

tabBarOnPress: ({ navigation }) => { 
  navigation.popToTop(); 
  navigation.navigate(navigation.state.routeName); 
} 

鸣谢:https://github.com/react-navigation/react-navigation/issues/1557

版本 2.x.x 和 3.x.x 的解决方案:

问题是，当我重置路线时，我需要传递前一个routeName(离开选项卡)的导航操作，并为下一个路线调度一个新的导航操作:

tabBarOnPress: ({ previousScene, scene }) => { 
    const tabRoute = scene.route.routeName; 
    const prevRouteName = previousScene.routes[0].routeName; 
 
    navigation.dispatch(NavigationActions.reset({ 
        index: 0, 
        actions: [ 
            NavigationActions.navigate({ 
                routeName: prevRouteName 
            }), 
        ], 
    })); 
 
    navigation.dispatch(NavigationActions.navigate({ 
        routeName: tabRoute 
    })); 
}