由于項目框架方案使用的混編，所以在項目中StackNavigator就變得尤為重要 下面就由小程同學帶大家來認識下這個控件。

在學習這個控件時 ?我查閱了多篇博客發現他們存在一個公有的問題 ?就是都忽略了一個傳值 ?他們只進行了跳轉的操作 ?忽略了對navigation的講解。這貨（navigation）對于我來說尤為的重要。因為我把Navigator隱藏 并單獨將Navigator寫成了View（NavigationView）進行控制那么返回按鈕的點擊事件是需要傳遞這貨的（navigation）不知道大家是否能聽懂 ?上圖1.0

1.0

在之后的講解中我會詳細說明這個值的作用。

下面我們按步驟講解StackNavigator的使用

1.首先我們知道在RN中的跳轉跟ios原生是不同的 ? 它需要的是一個路由（類似于書的目錄）標記viewcontroller的跳轉并且可以對每個導航配置

const MainScreenNavigator = StackNavigator({

TickVC:{screen:TicketViewController},//設置跳轉的界面

CityVC:{screen:CityViewController} },

{ initialRouteName: 'TickVC', // 默認顯示界面

headerMode:'none',//隱藏StackNavigator

navigationOptions: { // 屏幕導航的默認選項, 也可以在組件內用static navigationOptions 設置(會覆蓋此處的設置)

header: { // 導航欄相關設置項 //?

backTitle: '', // 左上角返回鍵文字

style: {

backgroundColor: 'red',

title:'國際機票',titleColor:'white' },

titleStyle: { color: 'green' } },

//cardStack: { // gesturesEnabled: false // } },

gesturesEnabled:true//是否可以使用手勢關閉此屏幕

} );

這里不是全部的屬性 只是我用到的 ?如果需要別的屬性可以去官方文檔上看 ?我就不贅述了。

我們設置好路由后 如圖2.0 在這個界面我多說一句，加上它

2.0

這樣我們就可以跳轉了

轉回我剛才提到的問題，點擊返回按鈕返回上一界面 ? 這時我需要將navigation傳遞給我上面提到的NavigationView ? navigation起到了傳遞整個navigator屬性的作用 如圖3.0

在state中可以發現我們在之前路由中設置的所有屬性 ?以及我從上一界面傳遞的數據都出現在了這里 所以navigation的定義是非常重要的

忘了說 ? 在iOS中pop跳轉函數在RN中調用的是：

this.props.navigation.goBack();

小結

至此我完成了StackNavigator的使用 ? 大家如果有不明白的地方可以留言，下次小程同學來跟大家介紹SectionList，敬請期待哦。