React Native中Drawer Navigator跳转Stack Navigator时过渡动画缺失

问题背景 #

我的导航结构是Stack嵌套Drawer，核心代码如下：

function DrawerNavigator() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="Categories"
                component={CategoriesScreen}
                // 其他配置项
            />
            <Drawer.Screen
                name="Favorites"
                component={FavoritesScreen}
                // 其他配置项
            />
        </Drawer.Navigator>
    );
}

// 根导航部分
return (
    <>
        <NavigationContainer onReady={onLayoutRootView}>
            <Stack.Navigator>
                <Stack.Screen
                    name="MealCategories"
                    component={DrawerNavigator}
                    options={{ headerShown: false }}
                />
                // 其他Stack页面
            </Stack.Navigator>
        </NavigationContainer>
    </>
);

在Drawer里的Favorites页面调用下面的代码跳转至同属Drawer的Categories页面时，完全没有过渡动画：

const buttonPressHandler = () => {
    navigation.navigate("Categories");
};

原因分析 #

Drawer Navigator的默认设计是通过抽屉菜单切换页面，直接用navigation.navigate切换同一Drawer内的页面时，并不会触发常规的页面过渡动画——因为它默认的切换逻辑是抽屉的滑入滑出，而非内部页面的过渡效果。

解决办法 #

办法一：给Drawer配置过渡预设 #

直接给Drawer Navigator添加Stack的过渡动画预设，让内部页面切换时有标准动画：

import { TransitionPresets } from '@react-navigation/stack';

function DrawerNavigator() {
    return (
        <Drawer.Navigator
            screenOptions={{
                // 用iOS风格的右滑入动画，也可以选其他预设
                ...TransitionPresets.SlideFromRightIOS,
            }}
        >
            <Drawer.Screen name="Categories" component={CategoriesScreen} />
            <Drawer.Screen name="Favorites" component={FavoritesScreen} />
        </Drawer.Navigator>
    );
}

办法二：调整导航嵌套结构 #

把需要过渡的页面放进内部Stack里，再将这个Stack作为Drawer的一个选项：

// 先做一个内部Stack，放Categories和Favorites
function InnerStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Categories" component={CategoriesScreen} />
            <Stack.Screen name="Favorites" component={FavoritesScreen} />
        </Stack.Navigator>
    );
}

// 再做Drawer导航
function DrawerNavigator() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="MainPages" component={InnerStack} />
            // 其他Drawer选项
        </Drawer.Navigator>
    );
}

这样在Favorites页面调用navigation.navigate("Categories")时，就会触发Stack的默认过渡动画。

办法三：用dispatch手动触发跳转（备选） #

如果前两种方法不适用，可以尝试用CommonActions.dispatch强制触发带动画的跳转：

import { CommonActions } from '@react-navigation/native';

const buttonPressHandler = () => {
    navigation.dispatch(
        CommonActions.navigate({
            name: "Categories",
            params: {},
        })
    );
};

注意：这个方法不一定适配所有Drawer配置，优先选前两种。

内容的提问来源于stack exchange，提问作者joepaji