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