react-native-router-flux 使用詳解（三）

 

在 上一章 http://www.cherylgood.cn

我們主要進一步介紹了react-native-router-flux的使用，接下來主要講解 其主要配置參數和api，當前我主要是翻譯官網的學習資料進行學習，我將在後面的章節中實際使用他，通關編寫一個rn版的微博app http://www.cherylgood.cn

Available imports 

• Router 
• Scene 
• Modal
• TabBar
• getInitialState
• Reducer
• DefaultRenderer
• Switch
• Actions
• ActionConst
• NavBar

Router:

Property	Type	Default	Description
reducer	function		optional user-defined reducer for scenes, you may want to use it to intercept all actions and put your custom logic 你可以爲scenes定義reducer，你可以通過使用reducer攔截所有的actions並執行你自定義的邏輯代碼。
createReducer	function		function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below 該函數功能：createReducer({initialState, scenes})將返回一個reducer，你可以用你自定義的reduer棒狀一個Reducer(param)，可以參看下面章節中Flux的用例。
other props			all properties that will be passed to all your scenes 在Router中定義的所有屬性都會傳入你的scenes組件中
children		required (if no scenes property passed) 當沒有children屬性被傳入時，router必須有子節點	Scene root element  通過children屬性定義我們的root元素
scenes	object	optional 可選	scenes for Router created with Actions.create. This will allow to create all actions BEFORE React processing. If you don't need it you may pass Scene root element as children 因爲scenes時Router被創建後通過Actions.create創建的。這將允許我們在React 創建scenes之前創建好所有的actions。如果你不需要你可以使用Scene跟元素作爲子節點
getSceneStyle	function	optional 可選	Optionally override the styles for NavigationCard's Animated.View rendering the scene. 根據需要重寫該樣式去改變導航卡的動畫。
backAndroidHandler	function	optional 可選	Optionally override the handler for BackAndroid, return true to stay in the app or return false to exit the app. Default handler will pop a scene and exit the app at last when the back key is pressed on Android. 可以重寫該方法去控制android設備的返回鍵，返回true時會停留在app內部，返回false時會直接退出app，默認的操作時重棧中出棧棧頂的scene，如果該scene是最後一個，就會退出app。（相信android程序員都很熟悉）
onBackAndroid	function	optional 可選	Get called after back key is pressed and a scene is poped, won't affect the default behavior. 在返回鍵被按下且scene彈出後將被調用，不會影響到默認的行爲。可以通過該方法做一些彈出後的操作。
onExitApp	function	optional	Optionally override the default action after back key is pressed on root scene. Return true to stay, or return false to exit the app. 可以重寫該方法去定義當處於root scene時，返回鍵被按下後的行爲，返回false會退出該app

Scene: 

Property	Type	Default	Description
key	string	required 必須	Will be used to call screen transition, for example, Actions.name(params). Must be unique. 在切換屏幕的時候會使用該key，例如Actions.name(params).key的值必須時唯一的。
component	React.Component	semi-required	The Component to be displayed. Not required when defining a nested Scene, see example. If it is defined for 'container' scene, it will be used as custom container renderer 切換到該scene時，component屬性定義的組件將被展示出來。當定義一個嵌套scene時不要求有。例如。如果他作爲一個scene容器定義。他將被視作一個自定義容器渲染者來使用。
initial	bool	false	Set to true if this is the initial scene 如果設置該屬性爲true，該scene將最爲默認初始化scene。你可以理解爲進來後進一個看到的scene
type	string	ActionConst.PUSH or ActionConst.JUMP	Defines how the new screen is added to the navigator stack. One of ActionConst.PUSH, ActionConst.JUMP, ActionConst.REPLACE, ActionConst.RESET. If parent container is tabbar (tabs=true), ActionConst.JUMP will be automatically set. 定義如何去創建一個新的屏幕並放入導航棧中。可以是ActionConst.PUSH,AtionConst.JUMP,ActionConst.REPLACK,AtionConst.RESET.如果父容器是一個tabbar且tabs=true，將會自動設置爲ActionConst.JUMP.
clone	bool		Scenes marked with clone will be treated as templates and cloned into the current scene's parent when pushed. See example. 在被push的時候，使用clone標識的Scenes將被作爲模版處理，並克隆到當前的scene的容器中。
passProps	bool	false	Pass all own props (except style, key, name, component, tabs) to children. Note that passProps is also passed to children. 將自己所有的屬性（except style，key，name，component，tabs）傳入到子節點。

ActionConst:

We accept shorthand string literal when defining scene type or action params, like:

在定義scene類型活着action參數時，我們接受間斷的字符串文字，例如：

Actions.ROUTE_NAME({type: 'reset'});
<Scene key="myscene" type="replace" >

but it will be converted to const value when pass to reducer. RECOMMENDATION is to always use const instead of string literal for consistency:

但是當傳入reducer時，它將被轉換成一個靜態值，爲來一致性，我們推薦總是使用靜態的去替換字符串文字。

Actions.ROUTE_NAME({type: ActionConst.RESET});
<Scene key="myscene" type={ActionConst.REPLACE} >

Property	Type	Value	Shorthand
ActionConst.JUMP	string	'REACT_NATIVE_ROUTER_FLUX_JUMP'	'jump'
ActionConst.PUSH	string	'REACT_NATIVE_ROUTER_FLUX_PUSH'	'push'
ActionConst.REPLACE	string	'REACT_NATIVE_ROUTER_FLUX_REPLACE'	'replace'
ActionConst.BACK	string	'REACT_NATIVE_ROUTER_FLUX_BACK'	'back'
ActionConst.BACK_ACTION	string	'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION'	'BackAction'
ActionConst.POP_AND_REPLACE	string	'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE'	'popAndReplace'
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'	'focus'

ActionConst and Scene.type explaination

ActionConst

are just a bunch of constants represent real values of various actions/scene.type to avoid future changes. you can treat it like redux action.

ActionConst可以理解爲就是一堆常量去表示真實的各種各樣的actions/scene.type的值，這樣做可以避免後期的變化。你可以像redux action一樣處理它。

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.

ActionConst 也可以直接使用，例如：Action.pop()將分派給符合的action（你在代碼中編寫的action）,或者，你可以在一個scene type中設置她們的常量。當你執行Action.main()時，它將根據你的scene type或者默認的一個去轉發給合適的action。

Not every ActionConst can be used the same way ( use as an action or whether it can be set in scene type or not) that's why it's just a bunch of constants to mask the actual values.

不是每個ActionConst都可以使用相同的方式（作爲一個動作使用，或者它是否可以在場景類型設置或不能），這就是爲什麼它只是一堆常量來掩蓋實際的值。（我的理解是在轉換爲常量值的時候他會根據你定義的方式做分類，以此爲依據進行處理，後續會閱讀代碼以確認～～）

Scene.type

Defines how the new screen is added to the navigator stack. One of push, modal, actionSheet, replace, switch, reset transitionToTop. Default is 'push'. And every Scene.type string literal has a mapped constant in ActionConst, it is recommended to always use constant.

定義如何去增加一個新的屏幕到導航棧中。可以是push,modal,actionSheet，replace,switch,reset transitionToTop中的一個（相信前三個ios程序員將不會陌生，因爲我現在主要是作爲android程序員，但是也搞過ios開發，所有都懂那麼一點點，理解起來好像挺有幫助的～～）.默認的是push。每一個Scene.type都會在ActionConst中存在一個對應的常量，我們推薦總是使用常量來表示。

replace: tells navigator to replace current route with new route.

replace:告訴導航器使用一個新的route來替換當前的route。

actionSheet: shows Action Sheet popup, you must pass callback as callback function.

actionSheet:以彈出的方式展示一個Action Sheet，你必須傳入一個回調作爲回調方法。

modal: type inserts its 'component' into route stack after navigator component. It could be used for popup alerts as well for various needed processes before any navigator transitions (like login auth process). it could be dismissed by using Actions.dismiss().

modal:在導航組件後的路由棧中插入該類型定義的組件。它可以被作爲一個彈出的提示框使用，也可以在任何導航傳輸之前（像登錄授權處理）做一些必須處理的操作進行使用。我們可以使用Actions.dismiss()關閉它。（類似android原生種的dialog，ios中的模態視圖）。

switch: is used for tab screens.

switch：在tab 場景下使用。（一般是點擊底部按鈕切換不同的scene）。

reset: is similar to replace except it unmounts the componets in the navigator stack.

reset：類似replace，但是它在導航棧中卸載了該組件。

transitionToTop: will reset router stack ['route.name'] and with animation, if route has sceneConfig. eg 

transitionToTop:如果路由有sceneConfig配置，如： ，將根據name重置路由堆棧中的路由和動畫。

Animation

Property	Type	Default	Description
duration	number		optional. acts as a shortcut to writing an applyAnimation function with Animated.timing for a given duration (in ms). 可選的。 充當在給定持續時間（以ms爲單位）中使用Animated.timing編寫applyAnimation函數的快捷方式。
direction	string	'horizontal'	direction of animation horizontal/vertical/leftToRight ('horizontal' will be right to left) 動畫的方向 水平／垂直／左到右 （水平即從右到左）
animation	string		animation options when transitioning: 'fade' currently only option 在轉換時的動畫選項，當前只有fade（漸變）
animationStyle	function		optional interpolation function for scene transitions: animationStyle={interpolationFunction} 用於場景轉換的可選內插函數：animationStyle = {interpolationFunction}
applyAnimation	function		optional if provided overrides the default spring animation 可選，如果提供將覆蓋默認的彈簧動畫

Gestures 手勢

Property	Type	Default	Description
panHandlers	object		optional, provide null to disable swipe back gesture 可選的，置爲null可以關閉滑動返回手勢。
getPanHandlers	function	optional	Optionally override the gesture handlers for scene 可選的去重寫一個scene的手勢操作

Scene styles 場景類型表

Property	Type	Default	Description
sceneStyle	View style	{ flex: 1 }	optional style override for the Scene's component 場景組件的可選樣式覆蓋
getSceneStyle	function	optional	Optionally override the styles for NavigationCard's Animated.View rendering the scene. Receives first argument of NavigationSceneRendererProps and second argument of {hideNavBar,hideTabBar,isActive} (see Example app). 可以覆蓋NavigationCard的Animated.View渲染場景的樣式。 接收NavigationSceneRendererProps的第一個參數和{hideNavBar，hideTabBar，isActive}的第二個參數。

Tabs

Property	Type	Default	Description
tabs	bool	false	Defines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If no component is defined, built-in TabBaris used as renderer. All child scenes are wrapped into own navbar. 定義TabBar場景容器以便子場景可以作爲tabs展示。如果沒有組件被定義，內置的TabBar 將作爲容器。所有的子場景都被包裹到自己的導航條中。
tabBarStyle	View style		optional style override for the Tabs component 可以選擇重寫去定義Tabs組件的樣式
tabBarBackgroundImage	Image source		optional background image for the Tabs component 可以選擇重寫去定義Tabs組件的背景圖片
tabBarIconContainerStyle	View style		optional style override for the View that contains each tab icon 可以選擇重寫去定義包含每個tab icon的vie容器的樣式
hideTabBar	bool	false	hides tab bar for this scene and any following scenes until explicitly reversed (if built-in TabBar component is used as parent renderer) 隱藏此場景的選項卡欄和任何後續場景，直到顯式反轉（如果內置TabBar組件用作父渲染器）
hideOnChildTabs	bool	false	hides tab bar when another tabs scene is added to the navigation stack. 當另一個選項卡場景添加到導航堆棧時，隱藏被添加到當行欄的場景的選項卡欄。
pressOpacity	number	0.2	the opacity when clicking on the tab 點擊選項卡時的透明度，默認0.2

Navigation Bar

Property	Type	Default	Description
hideNavBar	bool	false	hides the navigation bar for this scene and any following scenes until explicitly reversed 隱藏當前scene的導航欄和後續scene直到明確的反轉該值。
navigationBarStyle	View style		optional style override for the navigation bar 可以重寫該屬性去定義導航欄
navigationBarBackgroundImage	Image source		optional background image for the navigation bar 重寫該屬性去設置導航欄的背景圖片
navBar	React.Component		optional custom NavBar for the scene. Check built-in NavBar of the component for reference 通過該屬性設置自定義的導航欄。可以參考內置的導航欄組件
drawerImage	Image source	require('./menu_burger.png')	Simple way to override the drawerImage in the navBar

Navigation Bar: Title 標題

Property	Type	Default	Description
title	string	null	The title to be displayed in the navigation bar 設置導航欄標題
getTitle	function	optional	Optionally closure to return a value of the title based on state 根據state返回標題
renderTitle	function	optional	Optionally closure to render the title
titleStyle	Text style		optional style override for the title element 重寫標題的樣式
titleWrapperStyle	View style		optional style override for the title wrapper 重寫包裹標題的樣式
titleOpacity	string	optional	Set opacity for the title in navigation bar 在導航欄中設置不透明的標題
titleProps	object	null	Any other properties to be set on the title component 任何其他的屬性都會被設置到標題組件上

Navigation Bar: Back button 導航條的返回按鈕

Property	Type	Default	Description
backTitle	string		optional string to display with back button
renderBackButton	function		optional closure to render back text or button if this route happens to be the previous route 如果該路由恰好是之前的路由，關閉重新渲染返回按鈕文字或者按鈕的行爲
backButtonImage	Image source	require('./back_chevron.png')	Simple way to override the back button in the navBar
backButtonTextStyle	Text style		optional style override for the back title element
hideBackImage	boolean	false	no default back button image will be displayed 隱藏返回按鈕圖片
onBack	function	Actions.pop	actions for back button 點擊返回按鈕時的行爲，默認是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
...other props			all properties that will be passed to your component instance