title: 翻譯|React-navigation導(dǎo)航系統(tǒng)(2)
date: 2017-03-28 07:48:36
categories: 翻譯
tags: React-native

Navigators

Navigators允許你定義你的導(dǎo)航結(jié)構(gòu).Navigators也可以渲染普通的元素,例如你配置好的header和tab bar.
navigators可以是單純的React組件.

內(nèi)建的Navigators

react-navigation包含下面的幾個(gè)函數(shù)幫助你創(chuàng)建navigators：

• StackNavigator-一次渲染一個(gè)screen,在screen之間切換.當(dāng)一個(gè)新的screen被打開的時(shí)候,他被放在棧頂.
• TabNavigator-渲染出一個(gè)tab bar讓用戶可以在多個(gè)screen之間切換.
• DrawNavigator-渲染一個(gè)抽屜,可以從屏幕左邊側(cè)滑出.

使用Navigators渲染screen

navigators實(shí)際渲染的就是React組件
了解怎么創(chuàng)建screen,讀讀一下內(nèi)容:

• Screennavigationprops允許screen分發(fā)navigation動(dòng)作,例如操作另外一個(gè)screen.
• Screen navigationOptions定制screen的展示方式(例如：header title,tab label)

在頂層組件上調(diào)用導(dǎo)航

萬(wàn)一你想在同一級(jí)別的Navigation screen之間使用Navigator,你可以使用react的ref選項(xiàng):

   const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
  }
  render() {
    return (
      <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
  }
}

注意:這個(gè)解決辦法只能用在頂層navigator上.

Navigation Containers

如果navigators沒(méi)有props的話,他就會(huì)表現(xiàn)為頂層navigators.這個(gè)方式提供了一個(gè)透明的navigator container,這是頂層導(dǎo)航props的來(lái)源.
當(dāng)渲染其中一個(gè)navigators的時(shí)候,navigation prop是可選的.如果沒(méi)有navigation prop,container將會(huì)管理自己的導(dǎo)航state.他也可以使用URLs,外部鏈接以及整合android的back button.

為了使用方便,在幕后內(nèi)建的navigators有這個(gè)能力,因?yàn)樵谀缓笏麄兪褂昧?code>createNavigationContainer.通常,navigators需要一個(gè)navigation prop來(lái)執(zhí)行一定的功能.
onNavigationStateChange(prevState, newState)

當(dāng)navigation state由頂層navigator變化管理的時(shí)候,這一點(diǎn)非常有用.為了達(dá)到這個(gè)目的,這個(gè)函數(shù)在每次調(diào)用的時(shí)候都會(huì)使用導(dǎo)航之前的state和導(dǎo)航之后的新state作為參數(shù).

containerOptions
當(dāng)一個(gè)navigator在頂層被使用的時(shí)候,這些選項(xiàng)可以來(lái)配置這個(gè)navigator.
如果一個(gè)navigator配置了containerOptions,但是也接受了navigationprop,會(huì)拋出錯(cuò)誤.因?yàn)樵谶@種情況下,navigator有兩種選擇,它就不知道怎么做了.

• URIPrefic-app可以處理的URI前綴.在處理deep link的時(shí)候雾棺，可以提取路徑,并且傳遞到router.

StackNavigator

給你的app提供screen之間轉(zhuǎn)變的方法,每個(gè)轉(zhuǎn)變到的screen會(huì)存放在堆棧的棧頂.
默認(rèn)情況下,StackNavigator配置有iOS和android的外觀和感覺(jué):在iOS下,新的screen從屏幕的右側(cè)滑入,在android下,新的screen從底部淡入.iOS下也可以配置為從屏幕底部滑入.

 class MyHomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}
        title="Go to Lucy's profile"
      />
    );
  }
}

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

定義API

StackNavigator(Routeconfigs,StackNavigatorConfig)

RouteConfigs

route的配置對(duì)象是route name到route config的映射(譯者:這才是重點(diǎn)),配置對(duì)象告訴navigator什么來(lái)代表route.

StackNavigator({

  // For each screen that you can navigate to, create a new entry like this:
  Profile: {

    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:username',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: {
      title: ({state}) => `${state.params.username}'s Profile'`,
    },
  },

  ...MyOtherRoutes,
});

StackNavigatorConfig

Router的Options:

• initialRouteName-設(shè)定默認(rèn)的堆棧的screen.需要和route config的鍵之一相同.
• initalRouteParams-初始化route的參數(shù)
• navigationOptions-默認(rèn)需要使用的可選參數(shù)
• path-覆蓋route configs的路徑設(shè)置

可視化選項(xiàng):

• mode-定義渲染和切換之間的樣式:
  • card-使用iOS和android標(biāo)準(zhǔn)的切換方法.默認(rèn)值
  • modal-使screen從底部滑動(dòng)顯示.僅僅在iOS下使用,Andorid下沒(méi)有效果

• headerMode-定制header渲染的方法

  • float-切換界面的時(shí)候,用動(dòng)畫效果在screen的頂部渲染header
  • screen-每一個(gè)screen都有一個(gè)header附著到頭部,切換的時(shí)候有淡入和淡出的效果.andorid的基本模式
  • none-沒(méi)有header的渲染.

• cardStyle-使用這個(gè)prop來(lái)重寫或者擴(kuò)展單個(gè)card的默認(rèn)style

• onTransitionStart-當(dāng)card開始切換動(dòng)畫的時(shí)候,這個(gè)函數(shù)被調(diào)用

• onTransitionEnd-當(dāng)切換動(dòng)畫完成的時(shí)候,這個(gè)函數(shù)被調(diào)用

Screen Navigation Options

通常在screen組件中定義靜態(tài)的navigationOptions.例如:

class ProfileScreen extends React.Component {

  static navigationOptions = {

    title: ({ state }) => `${state.params.name}'s Profile!`,

    header: ({ state, setParams }) => ({
      // Render a button on the right side of the header
      // When pressed switches the screen to edit mode.
      right: (
        <Button
          title={state.params.editing ? 'Done' : 'Edit'}
          onPress={() => setParams({editing: state.params.editing ? false : true})}
        />
      ),
    }),
  };
  ...

所有的stackNavigator的navigationOptions:

• title-scene的標(biāo)題(字符串)
• header-header bar的配置對(duì)象
  • visible-header可視性的切換.只有當(dāng)headerMode是screen的時(shí)候才可以工作
  • title-header可以使用的字符串或者React組件,默認(rèn)是scene的title
  • backTitle-iOS back按鈕的title字符串或者null到disable標(biāo)簽,默認(rèn)設(shè)定到scene的title.
  • right-顯示在header右側(cè)的React組件
  • left-同上,左側(cè)
  • style-header的Style對(duì)象
  • titleStyle-title組建的Style對(duì)象
  • tintColor-header的著色
• cardStack-card stack的配置對(duì)象
  • gesturesEnabled-不管你是不是用手勢(shì),在iOS上是true,在android里是false.

Navigator Props

由StackNavigator(...)創(chuàng)建的navigator組件接收兩個(gè)props:
screenProps-向下傳遞到子screen,例如:

 const SomeStack = StackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Examples

看看實(shí)例SimpleStack.js和ModalStack.js,可以在本地的NavigationPlaygroundapp中運(yùn)行.

TabNavigator

通常很容易使用TabRouter來(lái)創(chuàng)建有幾個(gè)tabs的screen.

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBar: {
      label: 'Home',
      // Note: By default the icon is only shown on iOS. Search the showIcon option below.
      icon: ({ tintColor }) => (
        <Image
          source={require('./chats-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    },
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBar: {
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    },
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
});

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

定義API

TabNavigator(RouteConfigs,TabNavigator)

RouteConfigs

route的配置對(duì)象是route name到route config的映射(譯者:這才是重點(diǎn)),配置對(duì)象告訴navigator什么來(lái)代表route.

TabNavigatorConfig

• tabBarComponent-作為tab bar的組件.例如,TabView.TabBarBottom(ios的默認(rèn)配置),TabView.TabBarTop(android的默認(rèn)配置)
• tabBarPosition-tab bar的位置,可以是top和bottom
• swipeEnabled-是否在tab之間滑動(dòng)
• animationEnabled-變換tabs的時(shí)候是否開啟動(dòng)畫效果
• lazyLoad-是否在需要的時(shí)候才惰性加載tabs,代替預(yù)渲染
• tabBarOption-配置tab bar,看下面
  幾個(gè)Options可以傳遞到潛在的的router,修改導(dǎo)航的邏輯
• initialRouteName-初始化時(shí)加載的tab route
• order-定義tabs順序的routeName的數(shù)組
• paths-提供routeName到path配置的映射,重寫routeConfigs里的paths設(shè)置
• backBehavior-back button是不是應(yīng)該導(dǎo)致tab切換到初始的tab膊夹？入如果是的話,設(shè)定initialRoute,否則就是none.默認(rèn)到initialRoute的行為.

TabBarTop的tabBarOptions設(shè)置(android默認(rèn)的tab bar)

• activeTintColor-激活tab的標(biāo)簽和icon的顏色
• inactiveTintColor-未激活tab的標(biāo)簽和icon的顏色
• showIcon-是否在tab中顯示icon,默認(rèn)是false
• showLabel-是否在tab顯示label,默認(rèn)是true
• upperCaseLabel-tab的label是否是大寫,默認(rèn)是true
• pressColor-material漣漪效果的顏色(Android>=5.0)
• pressOpacity-按下tab的透明度變化(iOS和Android<5.0)
• scrollEnabled-是否是滑動(dòng)式tabs.
• tabStyle-tab的樣式配置對(duì)象
• indicatorStyle-tab指示器的樣式對(duì)象(tab底部的劃線)
• labelStyle-tab label的樣式對(duì)象
• style-tab bar的樣式對(duì)象

實(shí)例:

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

Screen導(dǎo)航的選項(xiàng)

通常在screen組件中定義靜態(tài)的navigationOptions.例如:

 class ProfileScreen extends React.Component {

  static navigationOptions = {

    title: ({ state }) => `${state.params.name}'s Profile!`,

    tabBar: ({ state, setParams }) => ({
      icon: (
        <Image src={require('./my-icon.png')} />
      ),
    }),
  };
  ...

所有TabNavigator的navigationOption:

• title-scene的title(字符串)
• tabBar-tab bar的config對(duì)象:
  • visible-tab bar的可見(jiàn)性的切換
  • icon-React組件或者函數(shù)給出{focused:boolean,tintColor:string},返回一個(gè)React組件,顯示在tab bar
  • label-顯示在tab bar中的tab的名字.如果定義為undefined,scene的title會(huì)被使用.如果要隱藏,看前面部分的tabBarOption.showLabel.

Navigator Props

由TabNavigator(...)創(chuàng)建的navigator組件接收下面的props:

• screenProps-向下傳遞額外的options給子screen,例如:

 const TabNav = TabNavigator({
  // config
});

<TabNav
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

抽屜式導(dǎo)航

用來(lái)構(gòu)建抽屜式導(dǎo)航

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Home',
      icon: ({ tintColor }) => (
        <Image
          source={require('./chats-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.tabIcon, {tintColor: tintColor}]}
        />
      ),
    }),
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

打開抽屜或者關(guān)閉抽屜,分別導(dǎo)航到DrawerOpen和Drawerclose.

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

定義API

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

參看前面的內(nèi)容

DrawerNavigatonConfig

• drawerWidth-抽屜的寬度
• drawerPosition-選項(xiàng)是left和right.默認(rèn)是left.
• contentComponent-用來(lái)渲染抽屜內(nèi)容的組件,例如,navigation item.接收navigationprop.默認(rèn)是DrawerView.Items.了解更多內(nèi)容看下面內(nèi)容.
• contentOptions-配置drawer的內(nèi)容,看下面內(nèi)容
  幾個(gè)選項(xiàng)傳遞給潛在的router,用來(lái)修改navigation的邏輯:
• initialRouteName-初始化route的routeName
• order-定義drawer item順序的routeName數(shù)組
• path-提供一個(gè)routeName到path config的映射,重寫掉routeConfigs中的path配置
• backBehavior-back按鈕一定要返回到初始化的route嗎？如果是的話,設(shè)置到initialRoute,否則就用none.默認(rèn)到initialRoute的行為.

提供定制化的contentComponent

可以使用react-navigation重寫默認(rèn)的組件.

 const CustomDrawerContentComponent = (props) => (
  <View style={style.container}>
    <DrawerView.Items {...props} />
  </View>
);

const styles = StyleSheet.create({
  container : {
    flex : 1,
  },
});

DrawerView.Item的contentOptions配置

• activeTintColor-激活的標(biāo)簽的label和icon的顏色
• activeBackgroundColor-激活的標(biāo)簽的背景顏色
• inactiveTintColor-未激活的標(biāo)簽的label和icon的顏色
• inactiveBackgroundColor-未激活的標(biāo)簽的背景顏色
• style-內(nèi)容部分的樣式對(duì)象

示例:

 contentOptions: {
  activeTintColor: '#e91e63',
  style: {
    marginVertical: 0,
  }
}

Screen導(dǎo)航的選項(xiàng)

通常在組件中定義靜態(tài)的navigationOptions.

 class ProfileScreen extends React.Component {

  static navigationOptions = {

    title: ({ state }) => `${state.params.name}'s Profile!`,

    drawer: {
      icon: (
        <Image src={require('./my-icon.png')} />
      ),
    },
  };
  ...

所有的DrawerNavigation navigationOption配置項(xiàng)

• title-scene的標(biāo)題
• drawer-drawer的配置對(duì)象
  • label-字符串,React組件或者函數(shù)被設(shè)定{fcoused:boolean,tinColor:string}返回一個(gè)React組件,顯示在drawer的邊欄上.當(dāng)label定義為undefined時(shí),scene的``title被使用.
  • icon-React組件或者函數(shù)被設(shè)定為{fcoused:boolean,tintColor:string}返回一個(gè)React元素,顯示在drawer的邊欄上.

Navigator 的Props

由DrawerNavigator(...)創(chuàng)建的navigator組件接受下面的props:

• screenProps-向下傳遞額外的options到子screen,例如:

 const DrawerNav = DrawerNavigator({
  // config
});

<DrawerNav
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Screen Navigation Prop

app中的每個(gè)screen都接收navigation prop 包含下面的內(nèi)容:

• navigate-(helper)鏈接的其他的screens
• state-screen的當(dāng)前state和routes
• setParam-(helper)改變r(jià)oute的參數(shù)
• goBack-(helper)關(guān)閉激活的screen并且返回
• dispatch-發(fā)送一個(gè)action到router

Navigation Actions

所有的Navigation Actions都會(huì)返回一個(gè)對(duì)象,這個(gè)對(duì)象可以使用navigation.dispatch方法傳遞到router.
注意：如果你想dispatch react-navigation,你應(yīng)該使用這個(gè)庫(kù)提供的action creators.

下面的actions是可以使用的:

• Navigate-導(dǎo)航到其他的route
• Reset-使用新的state代替目前的state
• Back-返回上一個(gè)state
• Set Params-給定的route設(shè)置參數(shù)
• Init-如果state沒(méi)有定義,用來(lái)初始化第一個(gè)state

Navigate

Navigatie action會(huì)使用Navigate action的結(jié)果來(lái)更新當(dāng)前的state.

• routeName-字符串-必選項(xiàng),在app的router里注冊(cè)的導(dǎo)航目的地的routeName.
• params-對(duì)象-可選項(xiàng)-融合進(jìn)目的地route的參數(shù)
• actions-對(duì)象-可選項(xiàng)-(高級(jí))-如果screen也是一個(gè)navigator,次級(jí)action可以在子router中運(yùn)行.在文檔中描述的任何actions都可以作為次級(jí)action.

 import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({

  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})

this.props.navigation.dispatch(navigateAction)

Reset

Resetaction刪掉所有的navigation state并且使用幾個(gè)actions的結(jié)果來(lái)代替.

• index—數(shù)組-必選-navigation state中route數(shù)組中激活route的index.
• actions-數(shù)組-必選項(xiàng)-Navigation Actions數(shù)組,將會(huì)替代navigation state

 import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'})
  ]
})
this.props.navigation.dispatch(resetAction)

怎么使用index參數(shù)

index參數(shù)被用來(lái)定制化當(dāng)前激活的route
例如：使用兩個(gè)routes Profile和Settings給一個(gè)基礎(chǔ)的stakc navigation設(shè)置.為了重置route到經(jīng)過(guò)Settings的激活screen那一點(diǎn),但是在堆棧中他又存放在Settingscreen之上,你可以這么做:

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'}),
    NavigationActions.navigate({ routeName: 'Settings'})
  ]
})
this.props.navigation.dispatch(resetAction)

Back

返回到前一個(gè)screen并且關(guān)閉當(dāng)前screen.backaction creator接受一個(gè)可選的參數(shù):

• key-字符串或者空-可選項(xiàng)-如果設(shè)定了,navigation將會(huì)從設(shè)定的key返回.如果是null,navigation將返回到任何地方.

import { NavigationActions } from 'react-navigation'

const backAction = NavigationActions.back({
  key: 'Profile'
})
this.props.navigation.dispatch(backAction)

SetParams

當(dāng)dispatching setParams的時(shí)候,router將會(huì)產(chǎn)出一個(gè)新的state,這個(gè)state是已經(jīng)改變了特定route的參數(shù),以key作為身份驗(yàn)證

• params-對(duì)象-必選參數(shù)-融合進(jìn)已經(jīng)存在的route參數(shù)中的新參數(shù)
• key-字符串-必選參數(shù)-Route的key,應(yīng)該分配給新的參數(shù)

 import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({
  params: { title: 'Hello' },
  key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

Screen Navigation Options

每個(gè)screen都可以配置幾個(gè)方面的內(nèi)容,這些內(nèi)容影響到在父navigators中怎么得到展示.

定制每一個(gè)可選項(xiàng)的兩種方法

靜態(tài)配置方法:每一個(gè)navigation 可選項(xiàng)都可以被直接設(shè)定:

 class MyScreen extends React.Component {
  static navigationOptions = {
    title: 'Great',
  };
  ...

動(dòng)態(tài)配置方法
要么就采用函數(shù)式的方法,接受參數(shù),然后返回可選項(xiàng)的值.

• navigation-screen的navigation prop和navigation.state中screen的route
• childRouter-如果screen是一個(gè)navigator,這個(gè)參數(shù)就是子代router.

 class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: (navigation, childRouter) => {
      return navigation.state.params.name + "'s Profile!";
    },
  };
  ...

通用的Navigation Options

navigation的可選項(xiàng)title在每一個(gè)navigator之間是通用的,用來(lái)設(shè)定每一個(gè)screen的標(biāo)題字符串.

 class MyScreen extends React.Component {
  static navigationOptions = {
    title: 'Great',
  };
  ...

不像其他的navigation的可配置項(xiàng)僅僅由navigator view來(lái)使用,title 選項(xiàng)可以被環(huán)境變量使用來(lái)更新瀏覽器的標(biāo)題或者app切換時(shí)候的標(biāo)題.

默認(rèn)的Navigation選項(xiàng)

在screen中定義navigationOption非常普遍,但是有時(shí)候在navigator中定義navitationOptions也是非常有用

想象下面的場(chǎng)景:你的TabNavigator代表app中的一個(gè)screen.他在頂層StackNavigator之內(nèi):

 StackNavigator:
  - route1: A screen
  - route2: A TabNavigator

現(xiàn)在route2是激活的,你可能會(huì)隱藏header,隱藏route1的header非常容易,route2的header應(yīng)該也很容易隱藏.這就是默認(rèn)Navigation Option 要做的.可以在navigationOptions中設(shè)定:

 TabNavigator({
  profile: ProfileScreen,
  ...
}, {
  navigationOptions: {
     header: {
       visible: false,
     },
   },
 });

提示:你仍然可以在子代導(dǎo)航screen上定制navigationOptions.-例如,上面的ProfileScreen.從screen獲得的navigationOptions會(huì)和從navigator來(lái)的配置按照鍵-鍵的方式融合在一起.無(wú)論在什么而時(shí)間,navigator和screen定義相同的配置(例如:header),screen會(huì)優(yōu)先使用.因此,當(dāng)ProfileScreen激活的時(shí)候,你可以使header再次可見(jiàn).

擴(kuò)展默認(rèn)配置:為了使用screen特定的properties擴(kuò)展默認(rèn)配置,而不是重寫它,你可以像下面一樣配置選項(xiàng):

 class ProfileScreen extends React.Component {
  static navigationOptions = {
    header: (navigation, defaultHeader) => ({
      ...defaultHeader,
      visible: true,
    }),
  }
  ...
}

傳遞到函數(shù)的第二個(gè)參數(shù)作為在navigator中定義的header的默認(rèn)值.

Tab Navigation Options

class TabScreen extends React.Component {

  static navigationOptions = {
    tabBar: ({ state }) => ({
      label: 'Tab Label',
      icon: ({ tintColor }) => (
        <Image
          source={require('./tab-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
      visible: true
    }),
  };

};

• label-可以是字符串或者是React組件
• icon-函數(shù)返回icon組件
• visible-true或者false,顯示或者隱藏tab bar,默認(rèn)是true

Custom Navigation

一個(gè)navigator是任何包含router的React組件.這里是一個(gè)基本navigator,使用router的API去獲得激活組件來(lái)渲染

 class MyNavigator extends React.Component {
  static router = MyRouter;
  render() {
    const { state, dispatch } = this.props.navigation;
    const { routes, index } = state;

    // Figure out what to render based on the navigation state and the router:
    const Component = MyRouter.getComponentForState(state);

    // The state of the active child screen can be found at routes[index]
    let childNavigation = { dispatch, state: routes[index] };
    // If we want, we can also tinker with the dispatch function here, to limit
    // or augment our children's actions

    // Assuming our children want the convenience of calling .navigate() and so on,
    // we should call addNavigationHelpers to augment our navigation prop:
    childNavigation = addNavigationHelpers(childNavigation);

    return <Component navigation={childNavigation} />;
  }
}

Navigation Prop

navigation prop傳遞給navigator的僅僅包含state和dispatch,這是當(dāng)前的navigator的state,但是還有一個(gè)事件頻道用來(lái)發(fā)送action request.
所有的navigators都是受控組件:他們總是顯示根據(jù)props.navigation.state來(lái)顯示,他們要改變state,唯一的辦法是發(fā)送actions到props.navigation.dispatch.
Navigators可以通過(guò)定制他們的router來(lái)改變父navigators的行為.例如,當(dāng)action應(yīng)該從router.getStateForAction返回null來(lái)阻止其運(yùn)行的時(shí)候.或者一個(gè)navigator可以為了定制URI的操作而改寫router.getActionForPathParams,為了輸出相對(duì)navigation action以及操作router.getStateForAction的action.

Navigation State

傳遞到props.navigation.state的navigation state有下面的結(jié)構(gòu):

 {
  index: 1, // identifies which route in the routes array is active
  routes: [
    {
      // Each route needs a name, which routers will use to associate each route
      // with a react component
      routeName: 'MyRouteName',

      // A unique id for this route, used to keep order in the routes array:
      key: 'myroute-123',

      // Routes can have any additional data. The included routers have `params`
      ...customRouteData,
    },
    ...moreRoutes,
  ]
}

Navigation Dispatchers

navigator可以dispatch navigation actions,例如Go to URI,Go back.
如果action被成功操作了,dispatcher將會(huì)返回true,否則就是false

構(gòu)建定制navigators的API

為了幫助開發(fā)者實(shí)施定制navigators,React Navigation提供了下面的工具
createNavigator
這個(gè)工具使用標(biāo)準(zhǔn)方法把router和navigation view合并在一起.

 const MyApp = createNavigator(MyRouter)(MyView);

幕后所做的是:

 const MyApp = ({ navigation }) => (
  <MyView router={MyRouter} navigation={navigation} />
);
MyApp.router = MyRouter;

addNavigationHelpers
接收一個(gè)擁有state和dispatch的純navigator的prop,傳遞的參數(shù)是在screen navigation prop中的各種函數(shù),例如navigation.navigate()和navigation.goBack().這些函數(shù)是簡(jiǎn)單的助手函數(shù)幫助創(chuàng)建action并且發(fā)送到dispatch.

createNavigationContainer

如果你想讓你的navigator作為頂層組件使用(沒(méi)有navigation prop傳入),你可以使用createNavigationContainer.當(dāng)缺少navigtion prop的時(shí)候,這個(gè)工具使你的navigator看起來(lái)像一個(gè)頂層的導(dǎo)航組件.它將管理app的state,和app級(jí)別的導(dǎo)航特性整合在一起,例如操作進(jìn)出的鏈接和android的返回按鈕行為.