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