如何在StackNavigator状态中过滤路由且无动画？（React Navigation）

这个问题我之前处理复杂路由场景时也遇到过——用NavigationActions.reset确实会触发不必要的动画，破坏结账流程的连贯性。好在你用了react-navigation-redux-helpers，导航状态完全托管在Redux store里，我们可以绕过NavigationActions的动画触发逻辑，直接更新Redux中的导航状态，实现无动画过滤路由的效果。

具体步骤： #

1. 定义自定义Redux Action
   先创建一个专门用于过滤路由的action，支持自定义过滤规则：

   // 定义action类型
   export const FILTER_NAVIGATION_ROUTES = 'FILTER_NAVIGATION_ROUTES';
   
   // Action Creator：接收过滤函数，用来指定要保留的路由
   export const filterNavigationRoutes = (filterFn) => ({
     type: FILTER_NAVIGATION_ROUTES,
     payload: { filterFn }
   });
   

2. 修改导航Reducer处理自定义Action
   在你用createNavigationReducer创建的导航reducer中，添加case处理这个自定义action，直接修改路由栈状态：

   import { NavigationActions } from 'react-navigation';
   import { createNavigationReducer } from 'react-navigation-redux-helpers';
   import AppNavigator from './path-to-your-app-navigator';
   import { FILTER_NAVIGATION_ROUTES } from './path-to-your-actions';
   
   const initialState = AppNavigator.router.getStateForAction(NavigationActions.init());
   
   const navReducer = (state = initialState, action) => {
     switch (action.type) {
       case FILTER_NAVIGATION_ROUTES:
         const { filterFn } = action.payload;
         // 过滤路由数组，保留符合条件的路由
         const newRoutes = state.routes.filter(filterFn);
         // 计算新的index：确保原活跃路由如果被保留，对应到新数组的正确位置
         const activeRouteKey = state.routes[state.index].key;
         const newIndex = newRoutes.findIndex(route => route.key === activeRouteKey);
         // 如果原活跃路由被过滤（比如要删的就是当前路由），根据业务调整目标路由，示例取最后一个路由
         const finalIndex = newIndex !== -1 ? newIndex : newRoutes.length - 1;
   
         // 返回新的导航状态，完全跳过react-navigation的动画触发逻辑
         return {
           ...state,
           index: finalIndex,
           routes: newRoutes
         };
       default:
         // 其他情况交给默认导航reducer处理
         return createNavigationReducer(AppNavigator)(state, action);
     }
   };
   
   export default navReducer;
   

3. 在组件中触发过滤操作
   当需要过滤掉route2时，直接dispatch这个自定义action即可，全程无动画：

   import { useDispatch } from 'react-redux';
   import { filterNavigationRoutes } from './path-to-your-actions';
   
   // 比如在结账流程的某个步骤组件中
   const YourCheckoutComponent = () => {
     const dispatch = useDispatch();
   
     const removeMiddleStep = () => {
       // 过滤掉key为'route2'的路由，也可以用route.name等其他条件
       dispatch(filterNavigationRoutes(route => route.key !== 'route2'));
     };
   
     return <Button onPress={removeMiddleStep}>移除中间结账步骤</Button>;
   };
   

关键注意事项： #

• 保证路由数组非空：过滤后要确保newRoutes至少有一个路由，避免finalIndex出现负数，你可以在过滤前加判断，比如如果过滤后为空，就保留结账起始页这类必要路由。
• 灵活调整index逻辑：如果原活跃路由被过滤（比如用户当时正处在route2），要根据你的结账流程调整finalIndex——比如回到route1还是直接跳转到route3，示例默认取最后一个路由，你可以改成符合业务需求的逻辑。
• 为什么无动画？：因为我们直接修改了Redux中的导航状态，react-navigation-redux-helpers会同步这个状态到导航组件，但这个过程不会触发NavigationActions自带的动画钩子，所以完全没有过渡动画，完美保持结账流程的连贯性。

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