Question

我想知道如果焦点和按下选项卡如何重置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设备，而android则不执行任何操作。

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

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

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

使用React Navigation 5双击选项卡上的选项卡中的重置堆栈

1 个答案: