React Navigation v6模态框导航如何实现首个从下而上、后续右进左出动画

方案1：嵌套导航结构实现（更推荐，逻辑分层清晰） #

核心思路是将首个模态页面作为根导航栈的独立模态节点，后续的模态页统一放在首个模态内部的子导航栈中，子栈默认使用iOS标准右进左出平移动画。

• 第一步：配置根导航栈，指定首个模态页的弹出样式为modal

import { createStackNavigator } from '@react-navigation/stack';
const RootStack = createStackNavigator();

function RootNavigator() {
  return (
    <RootStack.Navigator>
      {/* 主业务页面 */}
      <RootStack.Screen name="Home" component={HomeScreen} />
      {/* 首个模态页，使用默认从下到上弹出动画 */}
      <RootStack.Screen 
        name="FirstModal" 
        component={FirstModalScreen} 
        options={{ presentation: 'modal' }}
      />
    </RootStack.Navigator>
  );
}

• 第二步：在首个模态页内部创建子导航栈，后续要跳转的模态页全部放在该子栈中

const ModalInnerStack = createStackNavigator();

function FirstModalScreen() {
  return (
    <ModalInnerStack.Navigator>
      {/* 首个模态的初始页面 */}
      <ModalInnerStack.Screen name="FirstModalIndex" component={FirstModalIndexScreen} />
      {/* 后续二级/三级模态页，默认走iOS右进左出平移动画 */}
      <ModalInnerStack.Screen name="SecondModal" component={SecondModalScreen} />
      <ModalInnerStack.Screen name="ThirdModal" component={ThirdModalScreen} />
    </ModalInnerStack.Navigator>
  );
}

跳转时从主页面跳转到FirstModal为从下到上弹出，在模态内部跳转到SecondModal等页面自动使用右进左出动画，符合需求。

方案2：单根栈动态配置动画 #

如果不想使用嵌套结构，也可以在根导航的全局配置中根据路由名动态指定动画类型：

import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
const RootStack = createStackNavigator();

function RootNavigator() {
  return (
    <RootStack.Navigator
      screenOptions={({ route }) => {
        const isFirstModal = route.name === 'FirstModal';
        const isInnerModal = ['SecondModal', 'ThirdModal'].includes(route.name);
        return {
          ...(isFirstModal && {
            presentation: 'modal',
            ...TransitionPresets.ModalPresentationIOS
          }),
          ...(isInnerModal && {
            presentation: 'card',
            ...TransitionPresets.SlideFromRightIOS
          })
        }
      }}
    >
      <RootStack.Screen name="Home" component={HomeScreen} />
      <RootStack.Screen name="FirstModal" component={FirstModalScreen} />
      <RootStack.Screen name="SecondModal" component={SecondModalScreen} />
      <RootStack.Screen name="ThirdModal" component={ThirdModalScreen} />
    </RootStack.Navigator>
  );
}

如果你使用的是性能更优的@react-navigation/native-stack，配置逻辑完全一致，只需将presentation对应设置为modal/push即可，native-stack的push默认就是iOS标准右进左出动画。

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