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