使用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中（在代码片段中），可能应该做以下工作。

• 从应用程序NavigationContainer中获取navigationRef
• 检查所选的BottomTab是否聚焦（确定双击）。
  • e.preventDefault
  • 重置 SomeStack (不知道如何在BottomTabNavigator中获得导航对象的堆栈)

有谁能做到这一点呢？感谢所有的答案:)

Answer 1

Okey, 基本上你有2个选项来管理这个，第一个是检查导航状态，但是我发现，它只在IOS设备上有效，安卓系统没有任何作用。

这段代码从这个堆栈导航器导航到第一个屏幕。

<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' });
            },
        })} />

它实际上并没有重置导航器，只是进入到该标签导航器内的指定界面。