由于項目框架方案使用的混編,所以在項目中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,敬請期待哦。