自定义路由器

路由器对象提供了各种辅助方法来处理状态和操作，一个用于更新状态的 reducer 以及一些操作创建者。

路由器负责处理通过调用导航对象上的方法分派的 action。如果路由器无法处理 action，它可以返回 null，这将把 action 传播到其他路由器，直到它被处理。

您可以通过构建具有以下函数的对象来创建自己的路由器

• type - 表示路由器类型的字符串，例如 'stack'、'tab'、'drawer' 等。
• getInitialState - 返回导航器初始状态的函数。接收一个包含 routeNames 和 routeParamList 属性的选项对象。
• getRehydratedState - 从给定的部分状态重新水合完整 导航状态 的函数。接收一个部分状态对象和一个包含 routeNames 和 routeParamList 属性的选项对象。
• getStateForRouteNamesChange - 获取当前状态和更新的路由名称列表，并返回一个新状态的函数。接收状态对象和一个包含 routeNames 和 routeParamList 属性的选项对象。
• getStateForAction - 该函数接收当前状态和操作以及包含 routeNames 和 routeParamList 属性的选项对象，并返回一个新的状态。如果无法处理操作，则应返回 null。
• getStateForRouteFocus - 该函数接收当前状态和路由的键，并返回一个新的状态，其中该路由处于焦点状态。
• shouldActionChangeFocus - 该函数确定操作是否也应该更改父导航器中的焦点。某些操作（例如 NAVIGATE）可以更改父级中的焦点。
• actionCreators - 可选对象，包含操作创建者的列表，例如 push、pop 等。这些将用于向 navigation 对象添加辅助方法以调度这些操作。

示例

const router = {
  type: 'tab',

  getInitialState({ routeNames, routeParamList }) {
    const index =
      options.initialRouteName === undefined
        ? 0
        : routeNames.indexOf(options.initialRouteName);

    return {
      stale: false,
      type: 'tab',
      key: shortid(),
      index,
      routeNames,
      routes: routeNames.map(name => ({
        name,
        key: name,
        params: routeParamList[name],
      })),
    };
  },

  getRehydratedState(partialState, { routeNames, routeParamList }) {
    const state = partialState;

    if (state.stale === false) {
      return state as NavigationState;
    }

    const routes = state.routes
      .filter(route => routeNames.includes(route.name))
      .map(
        route =>
          ({
            ...route,
            key: route.key || `${route.name}-${shortid()}`,
            params:
              routeParamList[route.name] !== undefined
                ? {
                    ...routeParamList[route.name],
                    ...route.params,
                  }
                : route.params,
          } as Route<string>)
      );

    return {
      stale: false,
      type: 'tab',
      key: shortid(),
      index:
        typeof state.index === 'number' && state.index < routes.length
          ? state.index
          : 0,
      routeNames,
      routes,
    };
  },

  getStateForRouteNamesChange(state, { routeNames }) {
    const routes = state.routes.filter(route =>
      routeNames.includes(route.name)
    );

    return {
      ...state,
      routeNames,
      routes,
      index: Math.min(state.index, routes.length - 1),
    };
  },

  getStateForRouteFocus(state, key) {
    const index = state.routes.findIndex(r => r.key === key);

    if (index === -1 || index === state.index) {
      return state;
    }

    return { ...state, index };
  },

  getStateForAction(state, action) {
    switch (action.type) {
      case 'NAVIGATE': {
        const index = state.routes.findIndex(
          route => route.name === action.payload.name
        );

        if (index === -1) {
          return null;
        }

        return { ...state, index };
      }

      default:
        return BaseRouter.getStateForAction(state, action);
    }
  },

  shouldActionChangeFocus() {
    return false;
  },
};

const SimpleRouter = () => router;

export default SimpleRouter;

内置路由器

该库附带了一些标准路由器

• StackRouter
• TabRouter
• DrawerRouter

自定义路由器

您可以重用路由器并根据需要覆盖路由器函数，例如自定义现有操作的处理方式、添加其他操作等。

有关如何在现有导航器中使用自定义路由器覆盖路由器的详细信息，请参阅 自定义导航器。

自定义导航操作

假设您想添加一个自定义操作来清除历史记录

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

const MyTabRouter = (options) => {
  const router = TabRouter(options);

  return {
    ...router,
    getStateForAction(state, action, options) {
      switch (action.type) {
        case 'CLEAR_HISTORY':
          return {
            ...state,
            routeKeyHistory: [],
          };
        default:
          return router.getStateForAction(state, action, options);
      }
    },

    actionCreators: {
      ...router.actionCreators,
      clearHistory() {
        return { type: 'CLEAR_HISTORY' };
      },
    },
  };
};

与其编写自定义路由器来处理自定义操作，不如 向 dispatch 传递一个函数。它更简洁，建议您使用它，而不是覆盖路由器。

阻止导航操作

有时您可能希望根据您的路由阻止某些导航活动。假设您想阻止在 isEditing 为 true 时推送新屏幕

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

const MyStackRouter = (options) => {
  const router = StackRouter(options);

  return {
    ...router,
    getStateForAction(state, action, options) {
      const result = router.getStateForAction(state, action, options);

      if (
        result != null &&
        result.index > state.index &&
        state.routes[state.index].params?.isEditing
      ) {
        // Returning the current state means that the action has been handled, but we don't have a new state
        return state;
      }

      return result;
    },
  };
};

如果您想阻止返回，建议的方法是使用 beforeRemove 事件。