> 官網原話是這么說的：
> Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
> 為你的app提供了這樣一個功能：讓你的app在不通屏幕之間切換，并且每一個新的屏幕都放在堆棧的最頂部。
通俗一點：其實就是切換屏幕啦！
> 通過默認的 `StackNavigator` 將被配置為這樣的感覺：在IOS上是從右邊滑下，在Android上是通過底部淡出。在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
> `RouteConfigs` 對象是一個從路由名稱到路由配置的映射。他告訴 `navigator` 應該為該路由提供什么。
~~~
StackNavigator({
Profile: {
screen: ProfileScreen,
path: 'people/:name',
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),
},
...MyOtherRoutes,
});
~~~
### StackNavigatorConfig
**Options for the router:**
initialRouteName 設置堆棧的默認屏幕。必須匹配路線配置中的一個鍵。
initialRouteParams 初始化路由。
navigationOptions 設置默認導航選項。
paths 設置路徑覆蓋默認路徑
---
**Visual options**
`mode` 定義一個呈現的樣式。
----`card` ：使用標準的iOS和Android屏幕過渡。這是默認的。
----`modal` ：讓屏幕從底部滑動，這是一個常見的iOS模式。只在iOS上運行，對Android沒有影響。
`headerMode `：如何展示頭部標題
----`float`: 當屏幕被改變時，呈現一個在頂部和動畫的單個頭部。這是iOS中常見的模式。
----`screen` : 每一個屏幕都有一個頭附在它上面，頭和屏幕一起逐漸消失。這是Android上的常見模式。
----`none `- 不會呈現頭。
`cardStyle` ：使用這個 prop 覆蓋或者擴展堆棧中的單個卡片的默認樣式。
transitionConfig - Function to return an object that overrides default screen transitions.
onTransitionStart - Function to be invoked when the card transition animation is about to start.
onTransitionEnd - Function to be invoked once the card transition animation completes.
Screen Navigation Options
