更多分享請看：http://cherylgood.cn

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

Available imports

Router

Scene

Modal

TabBar

getInitialState

Reducer

DefaultRenderer

Switch

Actions

ActionConst

NavBar

Router:

PropertyTypeDefaultDescription

reducerfunction

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并執行你自定義的邏輯代碼。

createReducerfunction

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元素

scenesobjectoptional 可選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跟元素作為子節點

getSceneStylefunctionoptional 可選Optionally override the styles for NavigationCard's Animated.View rendering the scene.

根據需要重寫該樣式去改變導航卡的動畫。

backAndroidHandlerfunctionoptional 可選Optionally override the handler forBackAndroid, returntrueto stay in the app or returnfalseto 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程序員都很熟悉）

onBackAndroidfunctionoptional 可選Get called after back key is pressed and a scene is poped, won't affect the default behavior.

在返回鍵被按下且scene彈出后將被調用，不會影響到默認的行為。可以通過該方法做一些彈出后的操作。

onExitAppfunctionoptionalOptionally override the default action after back key is pressed on root scene. Returntrueto stay, or returnfalseto exit the app.

可以重寫該方法去定義當處于root scene時，返回鍵被按下后的行為，返回false會退出該app

Scene:

PropertyTypeDefaultDescription

keystringrequired 必須Will be used to call screen transition, for example,Actions.name(params). Must be unique.

在切換屏幕的時候會使用該key，例如Actions.name(params).key的值必須時唯一的。

componentReact.Componentsemi-requiredTheComponentto be displayed. Not required when defining a nestedScene, see example. If it is defined for 'container' scene, it will be used as custom containerrenderer

切換到該scene時，component屬性定義的組件將被展示出來。當定義一個嵌套scene時不要求有。例如。如果他作為一個scene容器定義。他將被視作一個自定義容器渲染者來使用。

initialboolfalseSet totrueif this is the initial scene

如果設置該屬性為true，該scene將最為默認初始化scene。你可以理解為進來后進一個看到的scene

typestringActionConst.PUSH

orActionConst.JUMPDefines how the new screen is added to the navigator stack. One ofActionConst.PUSH,ActionConst.JUMP,ActionConst.REPLACE,ActionConst.RESET. If parent container is tabbar (tabs=true),ActionConst.JUMPwill be automatically set.

定義如何去創建一個新的屏幕并放入導航棧中。可以是ActionConst.PUSH,AtionConst.JUMP,ActionConst.REPLACK,AtionConst.RESET.如果父容器是一個tabbar且tabs=true，將會自動設置為ActionConst.JUMP.

clonebool

Scenes marked withclonewill be treated as templates and cloned into the current scene's parent when pushed. See example.

在被push的時候，使用clone標識的Scenes將被作為模版處理，并克隆到當前的scene的容器中。

passPropsboolfalsePass 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'});

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});

PropertyTypeValueShorthand

ActionConst.JUMPstring'REACT_NATIVE_ROUTER_FLUX_JUMP''jump'

ActionConst.PUSHstring'REACT_NATIVE_ROUTER_FLUX_PUSH''push'

ActionConst.REPLACEstring'REACT_NATIVE_ROUTER_FLUX_REPLACE''replace'

ActionConst.BACKstring'REACT_NATIVE_ROUTER_FLUX_BACK''back'

ActionConst.BACK_ACTIONstring'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION''BackAction'

ActionConst.POP_AND_REPLACEstring'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE''popAndReplace'

ActionConst.POP_TOstring'REACT_NATIVE_ROUTER_FLUX_POP_TO''popTo'

ActionConst.REFRESHstring'REACT_NATIVE_ROUTER_FLUX_REFRESH''refresh'

ActionConst.RESETstring'REACT_NATIVE_ROUTER_FLUX_RESET''reset'

ActionConst.FOCUSstring'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 everyScene.typestring 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 toreplaceexcept 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

PropertyTypeDefaultDescription

durationnumber

optional. acts as a shortcut to writing anapplyAnimationfunction withAnimated.timingfor a given duration (in ms).

可選的。?充當在給定持續時間（以ms為單位）中使用Animated.timing編寫applyAnimation函數的快捷方式。

directionstring'horizontal'direction of animation horizontal/vertical/leftToRight ('horizontal' will be right to left)

動畫的方向 水平／垂直／左到右 （水平即從右到左）

animationstring

animation options when transitioning: 'fade' currently only option

在轉換時的動畫選項，當前只有fade（漸變）

animationStylefunction

optional interpolation function for scene transitions:animationStyle={interpolationFunction}

用于場景轉換的可選內插函數：animationStyle = {interpolationFunction}

applyAnimationfunction

optional if provided overrides the default spring animation

可選，如果提供將覆蓋默認的彈簧動畫

Gestures 手勢

PropertyTypeDefaultDescription

panHandlersobject

optional, provide null to disable swipe back gesture

可選的，置為null可以關閉滑動返回手勢。

getPanHandlersfunctionoptionalOptionally override the gesture handlers for scene

可選的去重寫一個scene的手勢操作

Scene styles 場景類型表

PropertyTypeDefaultDescription

sceneStyleView style{ flex: 1 }optional style override for the Scene's component

場景組件的可選樣式覆蓋

getSceneStylefunctionoptionalOptionally override the styles for NavigationCard's Animated.View rendering the scene. Receives first argument ofNavigationSceneRendererPropsand second argument of{hideNavBar,hideTabBar,isActive}(see Example app).

可以覆蓋NavigationCard的Animated.View渲染場景的樣式。 接收NavigationSceneRendererProps的第一個參數和{hideNavBar，hideTabBar，isActive}的第二個參數。

Tabs

PropertyTypeDefaultDescription

tabsboolfalseDefines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If nocomponentis defined, built-inTabBaris used as renderer. All child scenes are wrapped into own navbar.

定義TabBar場景容器以便子場景可以作為tabs展示。如果沒有組件被定義，內置的TabBar 將作為容器。所有的子場景都被包裹到自己的導航條中。

tabBarStyleView style

optional style override for the Tabs component

可以選擇重寫去定義Tabs組件的樣式

tabBarBackgroundImageImage source

optional background image for the Tabs component

可以選擇重寫去定義Tabs組件的背景圖片

tabBarIconContainerStyleView style

optional style override for the View that contains each tab icon

可以選擇重寫去定義包含每個tab icon的vie容器的樣式

hideTabBarboolfalsehides tab bar for this scene and any following scenes until explicitly reversed (if built-in TabBar component is used as parent renderer)

隱藏此場景的選項卡欄和任何后續場景，直到顯式反轉（如果內置TabBar組件用作父渲染器）

hideOnChildTabsboolfalsehides tab bar when anothertabsscene is added to the navigation stack.

當另一個選項卡場景添加到導航堆棧時，隱藏被添加到當行欄的場景的選項卡欄。

pressOpacitynumber0.2the opacity when clicking on the tab

點擊選項卡時的透明度，默認0.2

Navigation Bar

PropertyTypeDefaultDescription

hideNavBarboolfalsehides the navigation bar for this scene and any following scenes until explicitly reversed

隱藏當前scene的導航欄和后續scene直到明確的反轉該值。

navigationBarStyleView style

optional style override for the navigation bar

可以重寫該屬性去定義導航欄

navigationBarBackgroundImageImage source

optional background image for the navigation bar

重寫該屬性去設置導航欄的背景圖片

navBarReact.Component

optional custom NavBar for the scene. Check built-in NavBar of the component for reference

通過該屬性設置自定義的導航欄。可以參考內置的導航欄組件

drawerImageImage sourcerequire('./menu_burger.png')Simple way to override the drawerImage in the navBar

Navigation Bar: Title 標題

PropertyTypeDefaultDescription

titlestringnullThe title to be displayed in the navigation bar

設置導航欄標題

getTitlefunctionoptionalOptionally closure to return a value of the title based on state

根據state返回標題

renderTitlefunctionoptionalOptionally closure to render the title

titleStyleText style

optional style override for the title element

重寫標題的樣式

titleWrapperStyleView style

optional style override for the title wrapper

重寫包裹標題的樣式

titleOpacitystringoptionalSet opacity for the title in navigation bar

在導航欄中設置不透明的標題

titlePropsobjectnullAny other properties to be set on the title component

任何其他的屬性都會被設置到標題組件上

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

PropertyTypeDefaultDescription

backTitlestring

optional string to display with back button

renderBackButtonfunction

optional closure to render back text or button if this route happens to be the previous route

如果該路由恰好是之前的路由，關閉重新渲染返回按鈕文字或者按鈕的行為

backButtonImageImage sourcerequire('./back_chevron.png')Simple way to override the back button in the navBar

backButtonTextStyleText style

optional style override for the back title element

hideBackImagebooleanfalseno default back button image will be displayed

隱藏返回按鈕圖片

onBackfunctionActions.popactions for back button

點擊返回按鈕時的行為，默認是Actions.pop

Navigation Bar: Left button

PropertyTypeDefaultDescription

leftTitlestring

optional string to display on the left if the previous route does not providerenderBackButtonprop.renderBackButton>leftTitle>

getLeftTitlefunction

optional closure to display on the left if the previous route does not providerenderBackButtonprop.renderBackButton>getLeftTitle>

renderLeftButtonfunction

optional closure to render the left title / buttons element

onLeftfunction

function will be called when left navBar button is pressed

leftButtonImageImage source

Image for left button

leftButtonIconStyleView style

Image style for left button

leftButtonStyleView style

optional style override for the container of left title / buttons

leftButtonTextStyleText style

optional style override for the left title element

Navigation Bar: Right button

PropertyTypeDefaultDescription

rightTitlestring

optional string to display on the right.onRightmust be provided for this to appear.

getRightTitlefunction

optional closure to display on the right.onRightmust be provided for this to appear.

renderRightButtonfunction

optional closure to render the right title / buttons element

onRightfunction

function will be called when right navBar button is pressed

rightButtonImageImage source

Image for right button

rightButtonIconStyleView style

Image style for right button

rightButtonStyleView style

optional style override for the container of right title / buttons

rightButtonTextStyleText style

optional style override for the right title element

...other props

all properties that will be passed to your component instance