React-navigation导航系统(5)-Router

tags: React-Native

Routers

Router定义一个组件的navigation state,允许开发者定义路径和可以操作的actions.

内建的Routers

• StackRouter
• TabRouter

使用Routers

为了手动定制一个navigator,在组件里可以放一个静态的router.(使用内建的组件快速的定制一个navigator,使用Navigator Factory更容易实现).

 class MyNavigator extends React.Component {
    static router = StackRouter(routes, config);
    ...
}

现在你可以把这个组件作为另一个navigator的screen对待,MyNavigator的导航逻辑在StackRouter中定义.

定制化Router

看看[定制Router API 部分](https://reactnavigation.org/docs/routers/api)学习StackRouter和TabRouter的API.
只要你愿意也可以重写router的函数.

定制Navigation的Actions

为了重写navigation的行为,你可以在getStateForAction中重写navigation state的逻辑,从而手动处理routes和index.

 const MyApp = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})
MyApp.router = {
  ...MyApp.router,
  getStateForAction(action, state) {
    if (state && action.type === 'PushTwoProfiles') {
      const routes = [
        ...state.routes,
        {key: 'A', routeName: 'Profile', params: { name: action.name1 }},
        {key: 'B', routeName: 'Profile', params: { name: action.name2 }},
      ];
      return {
        ...state,
        routes,
        index: routes.length - 1,
      };
    }
    return MyApp.router.getStateForAction(action, state);
  },
};

阻止某些Navigation的Actions

有时候根据你的route,需要阻止某些navigation的活动

 const MyStackRouter = StackRouter({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})
const MyAppRouter = {
  ...MyStackRouter,
  getStateForAction(action, state) {
    if (
      state &&
      action.type === NavigationActions.BACK &&
      state.routes[state.index].params.isEditing
    ) {
      // Returning null from getStateForAction means that the action
      // has been handled/blocked, but there is not a new state
      return null;
    }
    return MyStackRouter.getStateForAction(action, state);
  },
};

操作定制URIs

或许你的app有一个独特的URI,内建的routers处理不了.你可以通过getActionForPathAndParams来扩展router.

 import { NavigationActions } from 'react-navigation'

const MyApp = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})
const previousGetActionForPathAndParams = MyApp.router.getActionForPathAndParams
Object.assign(MyApp.router, {
  getActionForPathAndParams(path, params) {
    if (
      path === 'my/custom/path' &&
      params.magic === 'yes'
    ) {
      // returns a profile navigate action for /my/custom/path?magic=yes
      return NavigationActions.navigate({
        routeName: 'Profile',
        action: NavigationActions.navigate({
          // This child action will get passed to the child router
          // ProfileScreen.router.getStateForAction to get the child
          // navigation state.
          routeName: 'Friends',
        }),
      });
    }
    return previousGetActionForPathAndParams(path, params);
  },
};

定制Router API

你可以童工下面的函数来构建自己的router对象,

 const MyRouter = {
  getStateForAction: (action, state) => ({}),
  getActionForPathAndParams: (path, params) => null,
  getPathAndParamsForState: (state) => null,
  getComponentForState: (state) => MyScreen,
  getComponentForRouteName: (routeName) => MyScreen,
};

// Now, you can make a navigator by putting the router on it:
class MyNavigator extends React.Component {
  static router = MyRouter;
  render() {
    ...
  }
}

getStateForAction(action,state)

根据给定的action来定义返回的navigation sate.当一个action通过props.navigation.dispatch()传递,或者任何其他的助手函数被调用,例如navigation.navitate()的时候,这个函数将会运行.

通常这个函数将会以下面的形式返回navitaion state.

 {
  index: 1, // identifies which route in the routes array is active
  routes: [
    {
      // Each route needs a name to identify the type.
      routeName: 'MyRouteName',

      // A unique identifier for this route in the routes array:
      key: 'myroute-123',
      // (used to specify the re-ordering of routes)

      // Routes can have any data, as long as key and routeName are correct
      ...randomRouteData,
    },
    ...moreRoutes,
  ]
}

如果router已经在外部处理了acion,或者想不改变任何的navigation state就消化它,这个函数就返回null.

getComponentForRouterName(routeName)

为给定的route name返回子组件或者navigator.
像这样声明一个routergetStateForAction输出的state.

 {
  index: 1,
  routes: [
    { key: 'A', routeName: 'Foo' },
    { key: 'B', routeName: 'Bar' },
  ],
}

基于state中的额routeName,router将会调用router.getComponentForRouteName('Foo')或router.getComponentForRouteName('Bar')来返回对应的有效组件.

 getComponentForState(state)

从深度嵌套navigation state返回激活的组件

 getActionForPathAndParams

返回一个可选配置的navigation action,在用户导航到这个路径并且有可选的查询参数的时候使用这个action.

 getPathAndParamsForState

用户在app中返回同一个URL链接的点时,这个函数返回路径和参数.
从这个函数返回的路径和参数应该是从一个action获得的,这个action是重传进入router的getActionForPathAndParams的.这个action一旦通过getStateForAction传递,会给你返回形似的state.

 getScreenConfig

这个函数从一个route获取navigation的可选项.必须要提供screen的当前navigation prop和被返回的选项的名字.

• navigation-这是screen将会使用的navigation prop,对应在screen的route和state.Dispatch将会根据screen的上下文来触发actions.
• optionName-被获取的选项的名字,例如’title’

在实例的视图内,或许你需要远程获取配置的标题

 // First, prepare a navigation prop for your child, or re-use one if already available.
const childNavigation = addNavigationHelpers({
  // In this case we use navigation.state.index because we want the title for the active route.
  state: navigation.state.routes[navigation.state.index],
  dispatch: navigation.dispatch,
})
const screenTitle = this.props.router.getScreenConfig(childNavigation, 'title');

StackRouter

管理navigation堆栈的逻辑,包括入栈,出栈,操作路径解析创建深层次的堆栈.

让我们看看简单的stack router

 const MyApp = StackRouter({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})

RouteConfig

最简单的stack router期待的参数是一个config对象,这里是示例配置

 const MyApp = StackRouter({ // This is the RouteConfig:
  Home: {
    screen: HomeScreen,
    path: '',
  },
  Profile: {
    screen: ProfileScreen,
    path: 'profile/:name',
  },
  Settings {
    // This can be handy to lazily require a screen:
    getScreen: () => require('Settings').default,
    // Note: Child navigators cannot be configured using getScreen because
    // the router will not be accessible. Navigators must be configured
    // using `screen: MyNavigator`
    path: 'settings',
  },
});

每一个在config中的条目有如下内容

• path-设定条目的路径和参数可以在stack中被解析
• screen-设定screen组件或者子navigator
• getScreen-为screen组件设定惰性加载的设定

StackConfig

配置的选项也被传递进入stack router.

• initalRouteName-stack首次加载的默认路由的routeName
• initialRouteParams-初始化route的默认参数
• paths-提供routeName到path配置的映射,将会重写routeConfigs里的path设置

Supported Actions

stack router可以对下面的导航actions作为响应.如果有可能,router将会代理到子代router的action操作.

• Navigate-如果routeName和router的routerConfigs其中之一匹配,将会push一个新的route到堆栈.
• Back-返回(props)
• Reset-清除堆栈,提供一个新的actions创建新的navigation state
• SetParams-screen dispatch一个action去改变当前route的参数

TabRouter

管理应用中的一套tabs,处理tabs之间的跳转,处理back键的操作返回到初始化的tab.
看看简单的tabs router

 const MyApp = TabRouter({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
}, {
  initialRouteName: 'Home',
})

RouteConfig

tabs router有为每一个tab的routeConfig

 const MyApp = TabRouter({ // This is the RouteConfig:
  Home: {
    screen: HomeScreen,
    path: 'main',
  },
  Settings: {
    // This can be handy to lazily require a tab:
    getScreen: () => require('./SettingsScreen').default,
    // Note: Child navigators cannot be configured using getScreen because
    // the router will not be accessible. Navigators must be configured
    // using `screen: MyNavigator`
    path: 'settings',
  },
});

config中的每一个config可能有

• config-每一个tab的path
• screen-定制screen组件或者子代navigator
• getScreen-为一个screen组件设定惰性加载的设置(navigator没有这样的配置)

Tab Router Config

被传递到router的可配置选项

• initialRouteName-首次加载的tab的routeName
• order-tabs的顺序
• path-提供routeName到path config的映射,映射重写routeConfig中的path设定
• backBehavior-点击back按钮应该返回到初始化的tab吗？如果是的话,设置initialRoute,否则就是none,默认到initialRoute的行为.

Support Actions

tabs router会对下面的navigation actions做出响应.如果有可能,router将代理到子代router的action.

• Navigate-如果和tab的routeName匹配,就会跳转到对应的tab
• Back-如果不是第一个默认的tab,就跳转到第一个tab
• SetParams-screen dispatch一个Action来改变当前route的state