react-native (三 - 下) : react-navigation

react-navigation

它是facebook官方推薦的代替 < 0.43.0版本Navigator組件的解決方案?文檔點這里

新人可能在這里會問,為什么我一定需要一些第三方的控件來寫一個簡單的功能,更甚者明明官方已經提供了一個NavigatorIOS了,它已經完全能勝任了?還要去下載一個第三方組件來增加包體積呢?其實意思是這樣沒錯,只是最重要的一點,我們現在是做webApp,這是一個跨平臺的解決方案,我們思維方式應該優先是wirte once, run everywhere。很多第三方其實都是內部實現了NavigatorIOS 還有 “NavigatorAndroid” ,我們只需要執行抽象過的公共方法來操作就好了,本質還是這兩個控件。而我們的代碼經過第三方的加工只需要編寫一次,不需要進行額外的設備判斷了。

stackNavigation?

還是來看一段官方的解釋,讓我們能稍微通透點的知道這個是什么

Provides a way for your app to transition between screens where each new screen is placed on top of a stack.

如同名字一樣stackNavigation,那么它是一個棧,大家都知道棧只有兩種方式:壓棧,出棧,而它是一個跳轉,過渡兩個場景的棧。


我們看到代碼:

1.在全局我們創建了一個名為ModalStack的StackNavigator的對象,并且傳遞了一個對象

2.在HomeScreen組件內,我們定義了一個靜態變量options。

我們一步一步的分析,我們這個stackNavigator的函數究竟做了些什么

StackNavigator(RouteConfigs,StackNavigatorConfig)?文檔點這里

這是StackNavigator的構造函數,里面有兩個參數 RouteConfigs,stackNavigatorConfig

routeConfigs

The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route.

我們了解到這個configs是一個映射表,通過這個映射表來讓navigator可以有效的查找到跳轉的組件或者界面,這個對象可以接受多個鍵值對,每個鍵值對的value是一個對象,而這個對象應該符合相應的格式才能供navigator解析

screen:用于映射目標對象或者界面

path: 用路由的方式來獲取對象或者界面

Optional: When deep linking or using react-navigation in a web app, this path is used

navigationOptions:這個就是來override我們screen組件中的static options對象的

回頭看我們的代碼。這里的ModalStack是我們當前導航的外界接口,在實際程序中我們需要將它export出去供其他文件調用,雖然我們提供的是一個navigation對象,但是它實際上會我們展示routeconfigs的第一個鍵值對,也就是當前程序的Home

const{navigate}=this.props.navigation;

這句話可以類比為我取出this.props.navigation對象中的navigate,為什么會在this.props中?(持續更新....)我們stackNavigatior在構造的時候會將自身的對象當做參數一樣傳遞到每個組件或者界面的props中去,方便每個組件或者界面能操作頂層的stack對象。

StackNavigatorConfig

這是一個optional對象,意味著我只有特定需求的時候才會去設置這個對象,詳情請查看文檔

TabNavigator?

Used to easily set up a screen with several tabs with a TabRouter.

我們打開src/MainTabbar/maintabbar.js

TabNavigator(RouteConfigs,TabNavigatorConfig)?文檔點這里

routeConfigs部分和stackNavigator一樣

TabNavigatorConfig

tabBarPosition:position of the tab bar, can be 'top' or 'bottom' 這里的top是android的默認風格,bottom是iOS的默認風格?

swipeEnabled:是否允許手勢切換

animationEnabled:是否有動畫效果

lazy:懶加載

whether to lazily render tabs as needed as opposed to rendering them upfront


DrawerNavigator ?(持續更新....)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容