React Navigation：如何向路由栈推入两个路由且无过渡闪烁

方案1：分步push + 禁用B页面过渡（推荐，保留C的正常入场动画） #

只在推入屏幕B时关闭过渡效果，屏幕C的入场动画保持默认，最终视觉效果和直接从A跳C完全一致，回退时会正常回到B：

// 静默插入屏幕B，禁用所有过渡动画，用户不会感知到B的存在
navigation.push('B', {}, { animationEnabled: false });
// 正常推入屏幕C，此时过渡动画为A到C的效果
navigation.push('C');

如果使用的是@react-navigation/stack（JS实现的栈导航），需要把动画配置放在参数的options字段中：

navigation.push('B', {}, {
  options: { animationEnabled: false }
});
navigation.push('C');

方案2：使用reset一次性构造导航栈 #

直接通过reset构造完整的[A -> B -> C]栈结构，同时禁用本次reset操作的过渡动画，直接展示C页面：

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

navigation.dispatch(
  CommonActions.reset({
    index: 2,
    routes: [
      { name: 'A' },
      { name: 'B' },
      { name: 'C' },
    ],
  }),
  { animationEnabled: false }
);

该方案的特点是无任何过渡效果，直接跳转到C页面，适合不需要入场动画的场景。

注意事项 #

如果屏幕B有初始化时执行的副作用逻辑（比如接口请求、埋点上报），可以在静默插入时传入特殊标记避免逻辑提前触发：

// 插入B时传入标记
navigation.push('B', { silentInsert: true }, { animationEnabled: false });

// 在B页面中判断执行逻辑
useEffect(() => {
  if (route.params?.silentInsert) return;
  // 正常的初始化逻辑
  fetchData();
  reportPV();
}, [route.params?.silentInsert]);

当用户从C回退到B时，silentInsert参数会保持，你可以根据需要在B页面的focus事件中重新执行初始化逻辑即可。

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