React Native 學習筆記二十一(導航器三方 插件學習)

所有的app設計，都會考慮導航的問題，android一般採用底部tabbar，但是最新的設計方案，更多的傾向於頭部tabbar,或者頭部scrollTabBar。本方案還是採用底部模式。

react-native最佳實踐,推薦的解決方案，  github地址 。 

如何使用 

react-native-router-flux 依賴於  ExNavigator ,所以首先要安裝ex-navigator 

安裝ex-navigator 

npm install @exponent/react-native-navigator --save

ExNavigator和Navigator之間的主要區別是可定製route。使用ExNavigator ，你可以定義每個scene的樣子，其導航欄的內容應該是什麼，當scene獲得或失去焦點時自定義動作。

安裝react-native-router-flux 

npm i react-native-router-flux --save

安裝  react-native-button

github上關注度很高的button控件，命令行安裝

npm install react-native-button --save

Feature 特點 

• 集中定義你的screens(routers),以及他們的轉場動畫
• 使用簡單的語法調用轉場，比如Action.login
• screens在轉場時以前必須的navigator對象， 取消了
• 使用schema定義一組screens的公共屬性，例如：定義一個name爲modal的schema,來表示從底部彈出的轉場動畫
• show/hide 導航欄
• 支持使用tab bar ,使用  react-native-tabs
• 支持嵌套的navigators,比如，每個tab 都有自己的導航，轉場動作將會自動的使用最上層的導航

Usage 用法 

1 在index.js中，定義router，跟他的子節點route

• 如果你的部分screens有公共屬性，請定義schema，來減少重複

2 在任何screen中

• import {Actions} from ‘react-native-router-flux’
• Actions.ACTION_NAME(PARAMS) 將被適當的調用，並將action跟params傳遞給route

Configuration 配置 

Router: 

Property	Type	Default	Description
header	object	null	optional header view
footer	object	null	optional footer view (e.g. tab bar)
hideNavBar	bool	false	hides navigation bar for every route

Route: 

Property	Type	Default	Description
name	string	required	必須是唯一的,將在screen轉場時調用.比如a場景name=’ima’,在b場景要跳轉到a，就在b場景onPress事件調用Action.ima(傳參)，ps使用redux實現了統一管理state狀態
component	React.Component	semi-required	要顯示在screen的主角，也可以嵌套router
type	string	optional	定義新screen如何被添加到navigation棧。有以下  push ,  modal ,  actionSheet ,  replace ,  switch ,  reset 模式。默認是’push’。  replace navigator用新route來replace 當前route.  actionSheet 彈出 Action Sheet彈窗, 必須穿回掉函數做參數, 可以看一下demon學習.  modal 在當前組件中，插入新組件. 用作在轉場之前 (比如登錄進程)彈出的提示框，屏蔽了下層的觸摸操作。  switch 跟tabbar的screen配合使用.  reset 用法接近replace，除了他要從navigatior stack中卸載.  modal 組件用Actions.dismiss()來取消
initial	bool	false	設置  true 本screen 爲初始頁
title	string	null	在navigation bar中顯示的標題
schema	string	optional	預先在schema定義的屬性
wrapRouter	bool	false	If true, the route is automatically nested in its own Router. Useful for modal screens. For type==switch wrapRouter will be true 設置爲true 本route爲自動嵌套到自己的router裏，對於modal scene是有用的。
sceneConfig	Navigator.SceneConfigs	optional	定義轉場動畫類型
defaultRoute	string	optional	定義要跳轉到哪個route，當本route作爲tab被選中並點擊的時候
hideNavBar	bool	false	隱藏本route的navigation bar
hideTabBar	bool	false	隱藏本route的tabBar (當父router創建了tabbar並使用了, check Example)
navigationBarStyle	View style		繼承自navigation bar 可選的style
titleStyle	Text style		optional style override for the title element
renderTitle	Closure		optional closure to render the title element
barButtonIconStyle	Image style		繼承自icon button可選的style (e.g. back icon)
leftTitle	string		可選的，顯示在left的文本（上一個roue沒有提供  renderBackButton prop時使用）  renderBackButton >  leftTitle >  previous route's title
renderLeftButton	Closure		optional closure to render the left title / buttons element
renderBackButton	Closure		optional closure to render back text or button if this route happens to be the previous route
leftButtonStyle	View style		optional style override for the container of left title / buttons
leftButtonTextStyle	Text style		optional style override for the left title element
rightTitle	string		optional string to display on the right.  onRight must be provided for this to appear.
renderRightButton	Closure		optional closure to render the right title / buttons element
rightButtonStyle	View style		optional style override for the container of right title / buttons
rightButtonTextStyle	Text style		optional style override for the right title element

Schema: 

Property	Type	Default	Description
name	string	required	The name of the schema, to be referenced in the route as  schema={"name"}
property	-	-	A  Schema can have any property that you want the  Route to inherit 可以定義任何你想在route裏面定義的屬性