时间戳

首页 > 解决方案 > 使用 React Navigation 5 在选项卡双击时重置选项卡内的堆栈

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

问题描述

我想知道如果 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 中（在代码片段中）可能应该完成以下操作：

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

标签： react-navigationreact-navigation-v5react-navigation-bottom-tab

解决方案

好吧，基本上你有两个选项来管理这个，首先是检查导航状态，但我发现它只适用于 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' });
            },
        })} />

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

推荐阅读