使用 React Navigation 5 在选项卡双击时重置选项卡内的堆栈

Question

我想知道如果 Tab 被聚焦并按下，如何重置 BottomTabNavigator 内的堆栈。

这是我目前的代码：

const Stack = createStackNavigator<MainStackParams>()
const BottomTab = createBottomTabNavigator<TabNavigatorParams>()
const navigationRef = React.useRef()

> Blockquote

<NavigationContainer ref={navigationRef}>
    <Stack.Navigator mode="modal">
            <Stack.Screen
                name={MainAppRoute.BOTTOM_TAB_NAVIGATOR}
                component={BottomTabNavigator}
            />
            ...
    </Stack.Navigator>
</NavigationContainer>

function BottomTabNavigator() {
    return (
        <BottomTab.Navigator>
            <BottomTab.Screen
                name={TabNavigatorRoute.SOME_STACK}
                component={SomeStack}
                listeners={{tabPress: e => {

                    // TODO: Reset stack in current tab (unsure how to do this)

                }}}
            />
            ...
        </BottomTab.Navigator>
    )
}

在 TODO 中（在代码 sn-p 中）可能应该完成以下操作：

• 从应用 NavigationContainer 获取 navigationRef
• 检查选定的 BottomTab 是否获得焦点（以确定双击）
  • e.preventDefault
  • reset SomeStack（不确定如何在 BottomTabNavigator 中获取导航对象的堆栈）

有没有人能够做到这一点？ 感谢所有答案:)

Answer 1

好吧，基本上你有两个选项来管理这个，第一个是检查导航状态，但我发现它只适用于 IOS 设备，android 不做任何事情。

这段代码从这个 stacknavigator 导航到第一个屏幕

<Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_home-menu.png')} style={{width: 26, height: 26, tintColor}}/>,
        }} listeners={({ navigation, route }) => ({
            tabPress: e => {
                if (route.state && route.state.routeNames.length > 0) {
                    navigation.navigate('Device')
                }
            },
        })} />

另一种解决方案，甚至更好，适用于 android 和 IOS 操作系统

DeviceNavigatorTab 这是选项卡导航器的屏幕名称，{screen: 'Device'} 是子堆栈导航器中的第一个堆栈屏幕名称，希望对您有所帮助

<Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_home-menu.png')} style={{width: 26, height: 26, tintColor}}/>,
        }} listeners={({ navigation }) => ({
            tabPress: e => {
                navigation.navigate('DeviceNavigatorTab', { screen: 'Device' });
            },
        })} />

它实际上并没有重置导航器，它只是转到该选项卡导航器内的指定屏幕。