react-native-router-flux

react-native-router-flux

1.react-native-router-flux是一個第三方的路由組件，目前的最新V4版本已經基於react-navigation實現。

2.react-native-router-flux包含了官方推薦react-navigation一些沒有實現的功能，如：modal,refresh等。

完整demo：https://github.com/lemonzwt/react-native-demo

 

Available imports

• Router
• Scene
• Tabs
• Tabbed Scene
• Drawer
• Modal
• Lightbox
• Actions
• ActionConst

Router:

Property	Type	Default	Description
children		required	頁面根組件
wrapBy	Function		容許集成諸如Redux（connect）和Mobx（observer）之類的狀態管理方案
sceneStyle	Style		適用於全部場景的Style（可選）
backAndroidHandler	Function		容許在Android中自定義控制返回按鈕（可選）

 

Scene:

此路由器的最重要的組件， 全部 <Scene> 組件必需要有一個惟一的 key。父節點<Scene>不能將component做爲prop，由於它將做爲其子節點的組件。

Property	Type	Default	Description
key	string	required	將用於標識頁面，例如Actions.name(params)。必須是獨一無二的
component	React.Component	semi-required	要顯示的組件，定義嵌套時不須要Scene，參見示例。
back	boolean	false	若是是true，則顯示後退按鈕，而不是由上層容器定義的左側/drawer按鈕。
backButtonImage	string		返回按鈕的圖片
backButtonTintColor	string		後退按鈕色調
init	boolean	false	true不顯示後腿按鈕
clone	boolean	false	標有clone的場景將被視爲模板，並在被推送時克隆到當前場景的父節點中。詳情請參見示例
contentComponent	React.Component		用於呈現抽屜內容的組件（例如導航）
drawer	boolean	false	載入DrawerNavigator內的子頁面
failure	Function		若是on返回一個「falsey」值，那麼failure將被調用。
backTitle	string		指定場景的後退按鈕標題
backButtonTextStyle	Style		後退按鈕的樣式
rightTitle	string		導航右側按鈕的標題
headerMode	string	float	指定標題應該如何呈現：（float渲染單個標題，保持在頂部，動畫隨着屏幕的變化，這是iOS上的常見樣式。）screen（每一個屏幕都有一個標題，而且標題淡入，與屏幕一塊兒出現，這是Android上的常見模式）若是爲none（不會顯示標題）
hideNavBar	boolean	false	隱藏導航欄
hideTabBar	boolean	false	隱藏標籤欄（僅適用於擁有tabs指定的場景）
hideBackImage	boolean	false	隱藏返回圖片
initial	boolean	false	設置爲true後，會默認顯示該頁面
leftButtonImage	Image		替換左側按鈕圖片
leftButtonTextStyle	Style		左側按鈕的文字樣式
leftButtonStyle	Style		左側按鈕樣式
leftButtonIconStyle	Style		左側按鈕icon樣式
modal	boolean	false	將場景容器定義爲modal，即全部子場景都將從底部彈起到頂部。它僅適用於containers（與v3版本的語法不一樣）
navBar	React.Component		可使用自定義的React組件來定義導航欄
navBarButtonColor	string		設置導航欄返回按鈕的顏色
navigationBarStyle	Style		導航欄的樣式
navigationBarTitleImage	Object		導航欄中的圖像中覆蓋title的Image
navigationBarTitleImageStyle	object		navigationBarTitleImage的樣式
navTransparent	boolean	false	導航欄是否透明
on	Function		又名 onEnter
onBack	Function		返回按鈕事件
onEnter	Function		當Scene要被跳轉時調用。props將被做爲參數提供。只支持定義了'component'的場景。
onExit	Function		當Scene要跳轉離開時調用。只支持定義了'component'的場景。
onLeft	Function		當導航欄左側按鈕被點擊時調用。
onRight	Function		當導航右側按鈕被點擊時調用。
renderTitle	React.Component		使用React組件顯示導航欄的title
renderLeftButton	React.Component		使用React組件顯示導航欄的左側按鈕。
renderRightButton	React.Component		使用React組件顯示導航欄的右側按鈕
renderBackButton	React.Component		使用React組件顯示導航欄的返回按鈕。
rightButtonImage	Image		設置右側按鈕的圖片。
rightButtonTextStyle	Style		右側按鈕文字的樣式
success	Function		若是on返回一個"真實"的值，那麼success將被調用。
tabs	boolean	false	將子場景加載爲TabNavigator。其餘標籤導航器屬性也是適用的。
title	string		要顯示在導航欄中心的文本。
titleStyle	Style		title的樣式。
type	string	push	可選的導航操做。你可使用replace來替換此場景中的當前場景
all other props			此處未列出的其餘屬性將轉交給Scene的component

 

Tabs (<Tabs> or <Scene tabs>)

標籤欄組件。
你可使用<Scene>中的全部props來做爲<Tabs>的屬性。 若是要使用該組件須要設置 <Scene tabs={true}>。

Property	Type	Default	Description
wrap	boolean	true	自動使用本身的導航欄包裝每一個場景（若是不是另外一個容器）。
activeBackgroundColor	string		指定焦點的選項卡的選中背景顏色。
activeTintColor	string		指定標籤欄圖標的選中色調顏色。
inactiveBackgroundColor	string		指定非焦點的選項卡的未選中背景顏色。
inactiveTintColor	string		指定標籤欄圖標的未選中色調顏色。
labelStyle	object		設置tabbar上文字的樣式。
lazy	boolean	false	在選項卡處於活動狀態以前，不會渲染選項卡場景(推薦設置成true)。
tabBarComponent	React.Component		使用React組件以自定義標籤欄
tabBarPosition	string		指定標籤欄位置。iOS上默認爲bottom，安卓上是top。
tabBarStyle	object		標籤欄的樣式。
tabStyle	object		單個選項卡的樣式。
showLabel	boolean	true	是否顯示標籤欄文字。
swipeEnabled	boolean	false	是否能夠滑動選項卡。
tabBarOnPress	function		自定義tabbar點擊事件。
backToInitial	boolean	false	若是選項卡圖標被點擊，返回到默認選項卡。

 

Stack (<Stack>)

將場景組合在一塊兒的組件，用於本身的基於堆棧實現的導航。使用它將爲此堆棧建立一個單獨的navigator，所以，除非您添加hideNavBar，不然將會出現兩個導航條。

Tab Scene (child <Scene> within Tabs)

用於實現Tabs的效果展現，能夠自定義icon和label。

Property	Type	Default	Description
icon	component	undefined	做爲選項卡圖標放置的React Native組件。
tabBarLabel	string		tabbar上的文字。

Drawer (<Drawer> or <Scene drawer>)

用於實現抽屜的效果，若是要使用該組件須要設置 <drawer tabs={true}>。

Property	Type	Default	Description
drawerImage	Image		替換抽屜'hamburger'圖標，你必須把它與drawer一塊兒設置。
drawerIcon	React.Component		用於抽屜'hamburger'圖標的任意組件，您必須將其與drawer道具一塊兒設置。
hideDrawerButton	boolean	false	是否顯示drawerImage或者drawerIcon。
drawerPosition	string	left	抽屜是在右邊仍是左邊。可選屬性right或left。
drawerWidth	number		抽屜的寬度（以像素爲單位）（可選）。

 

Modals (<Modal> or <Scene modal>)

想要實現模態，您必須將其<Modal>做爲您Router的根場景。在Modal將正常呈現第一個場景（應該是你真正的根場景），它將渲染第一個元素做爲正常場景，其餘全部元素做爲彈出窗口（當它們 被push）。

示例：在下面的示例中，root場景嵌套在<Modal>中，由於它是第一個嵌套Scene，因此它將正常呈現。若是要push到statusModal，errorModal或者loginModal，他們將呈現爲Modal，默認狀況下會從屏幕底部向上彈出。重要的是要注意，目前Modal不容許透明的背景。

//... import components
<Router>
  <Modal>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
    <Scene key="errorModal" component={ErrorModal} />
    <Scene key="loginModal" component={LoginModal} />
  </Modal>
</Router>

Lightbox (<Lightbox>)

Lightbox是用於將組件渲染在當前組件上Scene的組件 。與Modal不一樣，它將容許調整大小和背景的透明度。

示例：
在下面的示例中，root場景嵌套在中<Lightbox>，由於它是第一個嵌套Scene，因此它將正常呈現。若是要push到loginLightbox，他們將呈現爲Lightbox，默認狀況下將放置在當前場景的頂部，容許透明的背景。

//... import components
<Router>
  <Lightbox>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>

    {/* Lightbox components will lay over the screen, allowing transparency*/}
    <Scene key="loginLightbox" component={loginLightbox} />
  </Lightbox>
</Router>

Actions

該對象的主要工具是爲您的應用程序提供導航功能。 假設您的Router和Scenes配置正確，請使用下列屬性在場景之間導航。 有些提供添加的功能，將React道具傳遞到導航場景。

這些能夠直接使用，例如，Actions.pop()將在源代碼中實現的操做，或者，您能夠在場景類型中設置這些常量，當您執行Actions.main()時，它將根據您的場景類型或默認值來執行動做。

Property	Type	Parameters	Description
[key]	Function	Object	Actions將'自動'使用路由器中的場景key進行導航。若是須要跳轉頁面，能夠直接使用Actions.key()或Actions[key].call()。
currentScene	String		返回當前活動的場景。
jump	Function	(sceneKey: String, props: Object)	用於切換到新選項卡。
pop	Function		回到上一個頁面。
popTo	Function	(sceneKey: String, props: Object)	返回到指定的頁面。
push	Function	(sceneKey: String, props: Object)	跳轉到新頁面。
refresh	Function	(props: Object)	從堆棧中彈出當前場景，並將新場景推送到導航堆棧。沒有過分動畫。
replace	Function	(sceneKey: String, props: Object)	替換當前場景，沒有動畫。
reset	Function	(sceneKey: String, props: Object)	清除路由堆棧並將場景推入第一個索引. 沒有過渡動畫。
drawerOpen	Function		若是可用，打開Drawer。
drawerClose	Function		若是可用，關閉Drawer。

 

ActionConst

鍵入常量以肯定Scene轉換，這些是優先於手動鍵入其值，由於項目更新時可能會發生更改。

Property	Type	Value	Shorthand
ActionConst.JUMP	string	'REACT_NATIVE_ROUTER_FLUX_JUMP'	jump
ActionConst.PUSH	string	'REACT_NATIVE_ROUTER_FLUX_PUSH'	push
ActionConst.PUSH_OR_POP	string	'REACT_NATIVE_ROUTER_FLUX_PUSH_OR_POP'	push
ActionConst.REPLACE	string	'REACT_NATIVE_ROUTER_FLUX_REPLACE'	replace
ActionConst.BACK	string	'REACT_NATIVE_ROUTER_FLUX_BACK'	pop
ActionConst.BACK_ACTION	string	'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION'	pop
ActionConst.POP_TO	string	'REACT_NATIVE_ROUTER_FLUX_POP_TO'	popTo
ActionConst.REFRESH	string	'REACT_NATIVE_ROUTER_FLUX_REFRESH'	refresh
ActionConst.RESET	string	'REACT_NATIVE_ROUTER_FLUX_RESET'	reset
ActionConst.FOCUS	string	'REACT_NATIVE_ROUTER_FLUX_FOCUS'	N/A
ActionConst.BLUR	string	'REACT_NATIVE_ROUTER_FLUX_BLUR'	N/A
ActionConst.ANDROID_BACK	string	'REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK'	N/A