react-navigation 之 createStackNigator

簡介：

　　createStackNavigator 提供APP屏幕之間切換的能力，它是以棧的形式還管理屏幕之間的切換，新切換到的屏幕會放在棧的頂部。

 

屏幕轉場風格：

　　默認狀況下，createStackNavigator提供了轉場過渡效果，在Android和iOS上過渡效果是不一樣的，這也是React Native重平臺性的一個體現，在Android上從屏幕底部淡入，在iOS上是從屏幕的右側劃入，固然你也能夠經過配置讓StackNavigator支持屏幕從底部滑入的效果。

　

createStackNavigator API

 　createStackNavigator(RouteConfigs, StackNavigatorConfig):

• RouteConfigs(必選)：路由配置對象是從路由名稱到路由配置的映射，告訴導航器該路由呈現什麼。
• StackNavigatorConfig(可選)：配置導航器的路由(如：默認首屏，navigationOptions，paths等)樣式(如，轉場模式mode、頭部模式等)。

　　從createStackNavigator API上能夠看出createStackNavigator 支持經過RouteConfigs和 StackNavigatorConfig兩個參數來建立createStackNavigator導航器。

 

RouterConfigs

• screen(必選)：指定一個 React 組件做爲屏幕的主要顯示內容，當這個組件被createStackNavigator加載時，它會被分配一個navigation prop。

• path(可選)：用來設置支持schema跳轉時使用，具體使用會在下文的有關Schema章節中講到；

• navigationOptions(可選)：用以配置全局的屏幕導航選項如：title、headerRight、headerLeft等；

   -navigationOptions （屏幕導航選項）

• title: 能夠做爲headerTitle的備選字段(當沒設置headerTitle時會用該字段做爲標題)，也能夠做爲TabNavigator的tabBarLabel以及DrawerNavigator的drawerLabel。
• header: 自定義導航條，能夠經過設置null來隱藏導航條；
• headerTitle: 標題；
• headerTitleAllowFontScaling: 標題是否容許縮放，默認true；
• headerBackTitle: 定義在iOS上當前頁面進入到下一頁面的回退標題，能夠經過設置null來禁用它；
• headerTruncatedBackTitle: 當回退標題不能顯示的時候顯示此屬性的標題，好比回退標題太長了；
• headerBackImage：React 元素或組件在標題的後退按鈕中顯示自定義圖片。 當組件被調用時，它會在渲染時收到許多 props 如：（tintColor，title）。 默認爲帶有 react-navigation/views/assets/back-icon.png 這張圖片的組件，後者是平臺的默認後圖標圖像（iOS上爲向左的符號，Android上爲箭頭）。
• headerRight: 定義導航欄右邊視圖；
• headerLeft: 定義導航欄左邊視圖；
• headerStyle: 定義導航欄的樣式，好比背景色等；
• headerTitleStyle: 定義標題的樣式；
• headerLeftContainerStyle：自定義 headerLeft 組件容器的樣式，例如，增長 padding。
• headerRightContainerStyle：自定義 headerRight 組件容器的樣式,，例如，增長 padding。
• headerTitleContainerStyle：自定義 headerTitle 組件容器的樣式, 例如，增長 padding。
• headerBackTitleStyle: 定義返回標題的樣式；
• headerPressColorAndroid：顏色爲材料波紋 (Android >= 5.0)；
• headerTintColor: 定義導航條的tintColor，會覆蓋headerTitleStyle中的顏色；
• headerTransparent：默認爲 false。若是 true, 則標頭將不會有背景, 除非您顯式提供 headerStyle 或 headerBackground。
• headerBackground：與headerTransparent一塊兒使用，以提供在標題後臺呈現的組件。 例如，您能夠使用模糊視圖來建立半透明標題。
• gesturesEnabled: 定義是否能側滑返回，iOS默認true，Android默認false；
• gestureResponseDistance: 定義滑動返回的有效距離，水平狀態下默認：25，垂直狀態默認135；
• gestureDirection: 設置關閉手勢的方向。默認從左向右，能夠設置從右到左的滑動操做。