React Navigation

React Navigation是一個(gè)用于提供React Native導(dǎo)航功能的框架，框架使用了RN的原生接口，所以不需要native端再額外引入依賴(lài)。React Navigation并沒(méi)有使用iOS或者安卓原生的導(dǎo)航系統(tǒng)，而是選擇自己實(shí)現(xiàn)。
React Navigation也是使用棧的方式管理頁(yè)面的展示和轉(zhuǎn)場(chǎng)，提供手勢(shì)和動(dòng)畫(huà)支持。

創(chuàng)建導(dǎo)航

下面先介紹最常用的導(dǎo)航：createStackNavigator。
createStackNavigator是一個(gè)方法，內(nèi)部返回的React組件。所以可以作為App.js的根組件。
API定義：createStackNavigator(RouteConfigs, StackNavigatorConfig);

createStackNavigator分析

內(nèi)部需要兩個(gè)參數(shù)：RouteConfigs和StackNavigatorConfig。

配置路由

路由對(duì)象是通過(guò)路由名稱(chēng)和配置的映射 ，告訴導(dǎo)航需要在路由中展現(xiàn)的內(nèi)容。

  // 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/:name',
    // The action and route params are extracted from the path.

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

  ...MyOtherRoutes,
});

可以設(shè)置多個(gè)路由，并且通過(guò)StachNavigatorConfig內(nèi)的屬性配置默認(rèn)參數(shù)。

在一個(gè)路由內(nèi)，可以通過(guò)navigationOptions來(lái)定制導(dǎo)航的樣式，下面分析一下各個(gè)屬性。
title：導(dǎo)航的標(biāo)題。
header：類(lèi)型是React元素。如果設(shè)置了該屬性，默認(rèn)丟棄了原有導(dǎo)航，故設(shè)置的其他屬性都不再生效。
headerBackImage：類(lèi)型是React元素。用于自定義返回按鈕。
headerStyle：用于配置header的樣式。
headerTitleStyle：配置標(biāo)題樣式，例如字體，顏色等。
headerBackground：導(dǎo)航的背景圖片。

路由跳轉(zhuǎn)

跳轉(zhuǎn)
在路由顯示的組件內(nèi)，可以調(diào)用一下代碼進(jìn)行跳轉(zhuǎn)：

this.props.navigation.navigate('RouteName')

每個(gè)screen組件都會(huì)默認(rèn)創(chuàng)建一個(gè)navigation屬性。之后可以調(diào)用navigate("RouteName")方法來(lái)跳轉(zhuǎn)。（只能跳轉(zhuǎn)到我們已經(jīng)在導(dǎo)航棧內(nèi)定義過(guò)的路由，如果沒(méi)有定義過(guò)，則以上方法無(wú)效）。
navigate方法，如果已經(jīng)在A界面，再使用navigate跳轉(zhuǎn)A,會(huì)被系統(tǒng)視為無(wú)效，我們可以使用push方法代替。每次調(diào)用push會(huì)在當(dāng)前導(dǎo)航棧增加新路由。

返回
導(dǎo)航默認(rèn)會(huì)幫我們?cè)黾右粋€(gè)返回按鈕，點(diǎn)擊時(shí)系統(tǒng)會(huì)處理返回事件。如果想主動(dòng)觸發(fā)可以使用this.props.navigation.goBack()。
如果想處理多級(jí)返回的情況，比如從Home跳轉(zhuǎn)了很多界面，想返回Home的話可以使用navigate('Home')（注意不是push，push會(huì)創(chuàng)建并在導(dǎo)航棧添加新的路由，navigate是展示已經(jīng)注冊(cè)的導(dǎo)航棧內(nèi)的頁(yè)面）。或者使用navigation.popToTop()。

導(dǎo)航的生命周期

我們前面說(shuō)到了頁(yè)面之間的跳轉(zhuǎn)，那么在A跳轉(zhuǎn)到B時(shí)，A會(huì)發(fā)生什么變化，在返回時(shí)又會(huì)如何處理？
如果一個(gè)導(dǎo)航棧包含A B兩個(gè)頁(yè)面，當(dāng)顯示A時(shí)，A的componentDidMount會(huì)被調(diào)用，當(dāng)push B時(shí)，B的componentDidMount會(huì)被調(diào)用。A不會(huì)調(diào)用componentWillUnmount。
當(dāng)從B返回A時(shí)，B的componentWillUnmount會(huì)被調(diào)用，A的componentDidMount不會(huì)被調(diào)用，因?yàn)锳一直在掛載狀態(tài)中。
知道了生命周期方法調(diào)用細(xì)節(jié)后，我們回歸最開(kāi)始的問(wèn)題，如何知道頁(yè)面的離開(kāi)和返回狀態(tài)呢？
React Navigation對(duì)屏幕組件嵌入了四個(gè)訂閱方法：willFocus,willBlur,didFocus,didBlur。點(diǎn)擊focus/blur API了解更多。

設(shè)置默認(rèn)的導(dǎo)航樣式

上面提到的做法是在每個(gè)路由配置內(nèi)去設(shè)置每個(gè)頁(yè)面的導(dǎo)航，一般情況下，我們多個(gè)頁(yè)面的導(dǎo)航的樣式都是一致的，如果設(shè)置默認(rèn)的導(dǎo)航樣式呢？需要在StackNavigatorConfig內(nèi)通過(guò)屬性defaultNavigationOptions來(lái)設(shè)置：

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

通過(guò)屬性defaultNavigationOptions就可以設(shè)置導(dǎo)航的默認(rèn)樣式。
如果想重載默認(rèn)樣式，還可以在navigationOptions內(nèi)去設(shè)置，會(huì)對(duì)自定義和默認(rèn)進(jìn)行合并，自定義優(yōu)先級(jí)高于defaultNavigationOptions。