React—Native 控件之StackNavigator

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言 學習本系列內容需要具備一定 HTML 開發基礎,沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習 本人...
    珍此良辰閱讀 7,308評論 33 15
  • react-navigation導航組件使用詳解 注意了,如果有小伙伴們發現運行作者提供的react-naviga...
    光強_上海閱讀 23,506評論 38 103
  • 一、開源庫介紹 今年1月份,新開源的React-natvigation庫備受矚目。在短短不到3個月的時間,gith...
    德山_閱讀 2,220評論 0 19
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,868評論 18 139
  • 生活中,我們見到了很多人的努力,看著他們一點點改變,一點點進步,一點點遇見更好的自己;我們也看到了另外的一些朋友,...
    處處1閱讀 220評論 2 6