react-native-router-flux 組件使用詳解(二)

react-native-router-flux組件基礎使用教程分爲一二兩部分教程。教程一主要講解router-flux的使用方式，教程二主router-flux官方提供的各類API。

react-native-router-flux實戰詳解(一)

Demo示例

github.com/guangqiang-…

官方經常使用API

Available imports

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

Router

Property	Type	Default	Description
createReducer	Function		該函數功能：createReducer({initialState, scenes})將返回一個reducer，你能夠用你自定義的reducer綁定一個Reducer(param)，能夠參看下面章節中Flux的用例
dispatch	Function
state	object
scenes	Function		Style applied to all scenes (optional)
navigator	Function
wrapBy	Function		function to wrap each Scene component and nav bar buttons - allows easy MobX integration (by passing observer)
getSceneStyle	Function		根據須要重寫該樣式去改變導航卡的動畫。
sceneStyle	object
children	React.Component	required	Scene root element
backAndroidHandler	Function		能夠重寫該方法去控制android設備的返回鍵，返回true時會停留在app內部，返回false時會直接退出app，默認的操做是從棧中移除棧頂的scene，若是該scene是最後一個，就會退出app

Scene

Property	Type	Default	Description
key	string	required	在切換屏幕的時候會使用該key，例如Actions.name(params)。key的值必須時惟一的。
component	nt React.Component	semi-required	切換到該scene時，component屬性定義的組件將被展現出來。當定義一個嵌套的scene時不要求有。例如。若是他做爲一個scene容器定義。他將被視做一個自定義容器渲染者來使用。
initial	bool	false	若是設置該屬性爲true，該scene將成爲默認初始化scene。你能夠理解爲進來後進一個看到的scene
type	string	push	定義如何去建立一個新的屏幕並放入導航棧中。能夠是ActionConst.PUSH,AtionConst.JUMP,ActionConst.REPLACK,AtionConst.RESET.若是父容器是一個tabbar且tabs=true，將會自動設置爲ActionConst.JUMP
clone	boolean	false	在被push的時候，使用clone標識的Scenes將被做爲模版處理，並克隆到當前的scene的容器中。
all other props

Stack (<Stack>)

A component to group Scenes together for its own stack based navigation. Using this will create a separate navigator for this stack, so expect two navbars to appear unless you add hideNavBar.

Tab Scene (child <Scene> within Tabs)

Property	Type	Default	Description
icon	component		a React Native component to place as a tab icon
tabBarLabel	string		The string to override a tab label

Drawer(<Drawer> or <Scene drawer>)

Can use all prop as listed in Scene as , syntatic sugar for

Property	Type	Default	Description
drawerImage	Image		Image to substitute drawer 'hamburger' icon, you have to set it together with drawer prop
drawerIcon	React.Component		Arbitrary component to be used for drawer 'hamburger' icon, you have to set it together with drawer prop
hideDrawerButton	boolean	false	Boolean to show or not the drawerImage or drawerIcon
drawerPosition	string	left	Determines whether the drawer is on the right or the left. Keywords accepted are right and left
drawerWidth	number		The width, in pixels, of the drawer (optional)

Modals (<Modal> or <Scene modal>)

To implement a modal, you must use as the root scene in your Router. The Modal will render the first scene (should be your true root scene) normally, and all following To display a modal use as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed).

Example: In the example below, the root Scene is nested within a , since it is the first nested Scene, it will render normally. If one were to push to statusModal, errorModal or loginModal, they will render as a Modal and by default will pull up from the bottom of the screen. It is important to note that currently the Modal does not allow for transparent backgrounds.

//... 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 is a component used to render a component on top of the current Scene. Unlike modal, it will allow for resizing and transparency of the background.

Example: In the example below, the root Scene is nested within a , since it is the first nested Scene, it will render normally. If one were to push to loginLightbox, they will render as a Lightbox and by default will lay on top of the current Scene allowing for transparent backrounds.

//... 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

This Object is the main utility is to provide navigation features to your application. Assuming your Router and Scenes are configured properly, use the properties listed below to navigate between scenes. Some offer the added functionality to pass React props to the navigated scene.

These can be used directly, for example, Actions.pop() will dispatch correspond action written in the source code, or, you can set those constants in scene type, when you do Actions.main(), it will dispatch action according to your scene type or the default one.

Property	Type	Default	Description
[key]	Function	Object	The Actions object "automagically" uses the Scene's key prop in the Router to navigate. To navigate to a scene, call Actions.key() or Actions[key].call().
currentScene	String		Returns the current scene that is active
jump	Function	(sceneKey: String, props: Object)	used to switch to a new tab. For Tabs only.
pop	Function		Go back to the previous scene by "popping" the current scene off the nav stack
popTo	Function	(sceneKey: String, props: Object)	Pops the navigation stack until the Scene with the specified key is reached.
push	Function	(sceneKey: String, props: Object)	Pushes the scene to the stack, performing a transition to the new scene.
refresh	Function	(props: Object)	Reloads the current scene by loading new props into the Scene
replace	Function	(sceneKey: String, props: Object)	Pops the current scene from the stack and pushes the new scene to the navigation stack. *No transition will occur.
reset	Function	(sceneKey: String, props: Object)	Clears the routing stack and pushes the scene into the first index. No transition will occur.
drawerOpen	Function		Opens the Drawer if applicable
drawerClose	Function	Closes the Drawer if applicable

ActionConst

在定義scene類型或者action參數時，咱們能夠指定類型

Actions.ROUTE_NAME({type: 'reset'})

<Scene key="myscene" type="replace" >
複製代碼

可是當傳入reducer時，它將被轉換成一個靜態常量值，爲了一致性，咱們推薦老是使用常量的去替換字符串

Actions.ROUTE_NAME({type: ActionConst.RESET})

<Scene key="myscene" type={ActionConst.REPLACE} >
複製代碼

Type constants to determine Scene transitions, These are PREFERRED over typing their values manually as these are subject to change as the project is updated.

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

• replace:告訴導航器使用一個新的route來替換當前的route
• actionSheet:以彈出的方式展現一個Action Sheet，你必須傳入一個回調做爲回調方法。
• modal:在導航組件後的路由棧中插入該類型定義的組件。它能夠被做爲一個彈出的提示框使用，也能夠在任何導航傳輸以前（像登陸受權處理）作一些必須處理的操做進行使用。咱們可使用Actions.dismiss()關閉它。（相似android原生種的* dialog，ios中的模態視圖）。
• switch：在tab 場景下使用。（通常是點擊底部按鈕切換不一樣的scene）。
• reset：相似replace，可是它在導航棧中卸載了該組件。
• transitionToTop:若是路由有sceneConfig配置，如： ，將根據name重置路由堆棧中的路由和動畫。

Animation

Property	Type	Default	Description
duration	number		可選的。 充當在給定持續時間（以ms爲單位）中使用Animated.timing編寫applyAnimation函數的快捷方式。
direction	string	horizontal	動畫的方向 水平／垂直／左到右 （水平即從右到左）
animation	string		在轉換時的動畫選項，當前只有fade（漸變）
animationStyle	function		用於場景轉換的可選內插函數：animationStyle = {interpolationFunction}
applyAnimation	function		可選，若是提供將覆蓋默認的彈簧動畫

Gestures(手勢)

Property	Type	Default	Description
panHandlers	object		可選的，置爲null能夠關閉滑動返回手勢。
getPanHandlers	function		可選的去重寫一個scene的手勢操做

Scene styles

Property	Type	Default	Description
sceneStyle	style	{ flex: 1 }	場景組件的可選樣式覆蓋
getSceneStyle	function		能夠覆蓋NavigationCard的Animated.View渲染場景的樣式。 接收NavigationSceneRendererProps的第一個參數和{hideNavBar，hideTabBar，isActive}的第二個參數。

Tabs (<Tabs> or <Scene tabs>)

Property	Type	Default	Description
tabs	bool	false	定義TabBar場景容器以便子場景能夠做爲tabs展現。若是沒有組件被定義，內置的TabBar 將做爲容器。全部的子場景都被包裹到本身的導航條中。
tabBarStyle	style		能夠選擇重寫去定義Tabs組件的樣式
tabBarBackgroundImage	string		能夠選擇重寫去定義Tabs組件的背景圖片
tabBarIconContainerStyle	style		能夠選擇重寫去定義包含每一個tab icon的vie容器的樣式
hideTabBar	bool	false	隱藏此場景的選項卡欄和任何後續場景，直到顯式反轉（若是內置TabBar組件用做父渲染器）
hideOnChildTabs	bool	false	當另外一個選項卡場景添加到導航堆棧時，隱藏被添加到當行欄的場景的選項卡欄。
pressOpacity	number	0.2	點擊選項卡時的透明度，默認0.2

Navigation Bar

Property	Type	Default	Description
hideNavBar	bool	false	隱藏當前scene的導航欄
navigationBarStyle	style		能夠重寫該屬性去定義導航欄
navigationBarBackgroundImage	string		重寫該屬性去設置導航欄的背景圖片
navBar	React.Component		經過該屬性設置自定義的導航欄。能夠參考內置的導航欄組件
drawerImage	string		require('./menu_burger.png')

Navigation Bar(Title)

Property	Type	Default	Description
title	string		設置導航欄標題
getTitle	function		根據state返回標題
renderTitle	function		Optionally closure to render the title
titleStyle	Text style		重寫標題的樣式
titleOpacity	string		在導航欄中設置不透明的標題
titleProps	object		任何其餘的屬性都會被設置到標題組件上

Navigation Bar（Back button）

Property	Type	Default	Description
backTitle	string		optional string to display with back button
renderBackButton	function		若是該路由剛好是以前的路由，關閉從新渲染返回按鈕文字或者按鈕的行爲
backButtonImage	string		optional style override for the back title element
hideBackImage	boolean	false	隱藏返回按鈕圖片
onBack	function	Actions.pop	點擊返回按鈕時的行爲，默認是Actions.pop

Navigation Bar（Left button）

Property	Type	Default	Description
leftTitle	string		optional string to display on the left if the previous route does not provide renderBackButton prop. renderBackButton > leftTitle>
getLeftTitle	function		optional closure to display on the left if the previous route does not provide renderBackButton prop. renderBackButton > getLeftTitle >
renderLeftButton	function		optional closure to render the left title / buttons element
onLeft	function		function will be called when left navBar button is pressed
leftButtonImage	Image source	Image for left button
leftButtonIconStyle	View style		Image style for left button
leftButtonStyle	View style		optional style override for the container of left title / buttons
leftButtonTextStyle	Text style		optional style override for the left title element

Navigation Bar（Right button）

Property	Type	Default	Description
rightTitle	string		optional string to display on the right. onRight must be provided for this to appear.
getRightTitle	function		optional closure to display on the right. onRight must be provided for this to appear.
renderRightButton	function		optional closure to render the right title / buttons element
onRight	function		function will be called when right navBar button is pressed
rightButtonImage	Image source		Image for right button
rightButtonIconStyle	View style		Image style for right button
rightButtonStyle	View style		optional style override for the container of right title / buttons
rightButtonTextStyle	Text style		optional style override for the right title element

官方地址

github.com/aksonov/rea…

官方API

github.com/aksonov/rea…

參考文獻

www.cnblogs.com/yz1311/p/60… blog.csdn.net/jiecsdn/art… blog.csdn.net/jiecsdn/art… blog.csdn.net/jiecsdn/art…

更多文章

• 做者React Native開源項目OneM地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
• 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！

小夥伴們掃下方二維碼加入RN技術交流QQ羣