react-navigation
它是facebook官方推薦的代替 < 0.43.0版本Navigator組件的解決方案?文檔點(diǎn)這里
新人可能在這里會(huì)問，為什么我一定需要一些第三方的控件來寫一個(gè)簡(jiǎn)單的功能，更甚者明明官方已經(jīng)提供了一個(gè)NavigatorIOS了，它已經(jīng)完全能勝任了？還要去下載一個(gè)第三方組件來增加包體積呢？其實(shí)意思是這樣沒錯(cuò)，只是最重要的一點(diǎn)，我們現(xiàn)在是做webApp，這是一個(gè)跨平臺(tái)的解決方案，我們思維方式應(yīng)該優(yōu)先是wirte once， run everywhere。很多第三方其實(shí)都是內(nèi)部實(shí)現(xiàn)了NavigatorIOS 還有 “NavigatorAndroid” ，我們只需要執(zhí)行抽象過的公共方法來操作就好了，本質(zhì)還是這兩個(gè)控件。而我們的代碼經(jīng)過第三方的加工只需要編寫一次，不需要進(jìn)行額外的設(shè)備判斷了。
stackNavigation?
還是來看一段官方的解釋，讓我們能稍微通透點(diǎn)的知道這個(gè)是什么
Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
如同名字一樣stackNavigation，那么它是一個(gè)棧，大家都知道棧只有兩種方式：壓棧，出棧，而它是一個(gè)跳轉(zhuǎn)，過渡兩個(gè)場(chǎng)景的棧。
我們看到代碼：
1.在全局我們創(chuàng)建了一個(gè)名為ModalStack的StackNavigator的對(duì)象，并且傳遞了一個(gè)對(duì)象
2.在HomeScreen組件內(nèi)，我們定義了一個(gè)靜態(tài)變量options。
我們一步一步的分析，我們這個(gè)stackNavigator的函數(shù)究竟做了些什么
StackNavigator(RouteConfigs,StackNavigatorConfig)?文檔點(diǎn)這里
這是StackNavigator的構(gòu)造函數(shù)，里面有兩個(gè)參數(shù) 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.
我們了解到這個(gè)configs是一個(gè)映射表，通過這個(gè)映射表來讓navigator可以有效的查找到跳轉(zhuǎn)的組件或者界面，這個(gè)對(duì)象可以接受多個(gè)鍵值對(duì)，每個(gè)鍵值對(duì)的value是一個(gè)對(duì)象，而這個(gè)對(duì)象應(yīng)該符合相應(yīng)的格式才能供navigator解析
screen：用于映射目標(biāo)對(duì)象或者界面
path： 用路由的方式來獲取對(duì)象或者界面
Optional: When deep linking or using react-navigation in a web app, this path is used
navigationOptions：這個(gè)就是來override我們screen組件中的static options對(duì)象的
回頭看我們的代碼。這里的ModalStack是我們當(dāng)前導(dǎo)航的外界接口，在實(shí)際程序中我們需要將它export出去供其他文件調(diào)用，雖然我們提供的是一個(gè)navigation對(duì)象，但是它實(shí)際上會(huì)我們展示routeconfigs的第一個(gè)鍵值對(duì)，也就是當(dāng)前程序的Home
const{navigate}=this.props.navigation;
這句話可以類比為我取出this.props.navigation對(duì)象中的navigate，為什么會(huì)在this.props中？（持續(xù)更新....）我們stackNavigatior在構(gòu)造的時(shí)候會(huì)將自身的對(duì)象當(dāng)做參數(shù)一樣傳遞到每個(gè)組件或者界面的props中去，方便每個(gè)組件或者界面能操作頂層的stack對(duì)象。
StackNavigatorConfig
這是一個(gè)optional對(duì)象，意味著我只有特定需求的時(shí)候才會(huì)去設(shè)置這個(gè)對(duì)象，詳情請(qǐng)查看文檔
TabNavigator?
Used to easily set up a screen with several tabs with a TabRouter.
我們打開src/MainTabbar/maintabbar.js
TabNavigator(RouteConfigs,TabNavigatorConfig)?文檔點(diǎn)這里
routeConfigs部分和stackNavigator一樣
TabNavigatorConfig
tabBarPosition：position of the tab bar, can be 'top' or 'bottom' 這里的top是android的默認(rèn)風(fēng)格，bottom是iOS的默認(rèn)風(fēng)格?
swipeEnabled：是否允許手勢(shì)切換
animationEnabled：是否有動(dòng)畫效果
lazy：懶加載
whether to lazily render tabs as needed as opposed to rendering them upfront
