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

我們主要進(jìn)一步介紹了react-native-router-flux的使用，接下來主要講解 其主要配置參數(shù)和api，當(dāng)前我主要是翻譯官網(wǎng)的學(xué)習(xí)資料進(jìn)行學(xué)習(xí)，我將在后面的章節(jié)中實(shí)際使用他，通關(guān)編寫一個(gè)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并執(zhí)行你自定義的邏輯代碼。

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

該函數(shù)功能：createReducer({initialState, scenes})將返回一個(gè)reducer，你可以用你自定義的reduer棒狀一個(gè)Reducer(param)，可以參看下面章節(jié)中Flux的用例。

other props

all properties that will be passed to all your scenes

在Router中定義的所有屬性都會傳入你的scenes組件中

children

required (if no scenes property passed)

當(dāng)沒有children屬性被傳入時(shí)，router必須有子節(jié)點(diǎn)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

因?yàn)閟cenes時(shí)Router被創(chuàng)建后通過Actions.create創(chuàng)建的。這將允許我們在React 創(chuàng)建scenes之前創(chuàng)建好所有的actions。如果你不需要你可以使用Scene跟元素作為子節(jié)點(diǎn)

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

根據(jù)需要重寫該樣式去改變導(dǎo)航卡的動(dòng)畫。

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設(shè)備的返回鍵，返回true時(shí)會停留在app內(nèi)部，返回false時(shí)會直接退出app，默認(rèn)的操作時(shí)重棧中出棧棧頂?shù)膕cene，如果該scene是最后一個(gè)，就會退出app。（相信android程序員都很熟悉）

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

在返回鍵被按下且scene彈出后將被調(diào)用，不會影響到默認(rèn)的行為?？梢酝ㄟ^該方法做一些彈出后的操作。

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

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

Scene:

PropertyTypeDefaultDescription

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

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

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時(shí)，component屬性定義的組件將被展示出來。當(dāng)定義一個(gè)嵌套scene時(shí)不要求有。例如。如果他作為一個(gè)scene容器定義。他將被視作一個(gè)自定義容器渲染者來使用。

initialboolfalseSet totrueif this is the initial scene

如果設(shè)置該屬性為true，該scene將最為默認(rèn)初始化scene。你可以理解為進(jìn)來后進(jìn)一個(gè)看到的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.

定義如何去創(chuàng)建一個(gè)新的屏幕并放入導(dǎo)航棧中?？梢允茿ctionConst.PUSH,AtionConst.JUMP,ActionConst.REPLACK,AtionConst.RESET.如果父容器是一個(gè)tabbar且tabs=true，將會自動(dòng)設(shè)置為ActionConst.JUMP.

clonebool

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

在被push的時(shí)候，使用clone標(biāo)識的Scenes將被作為模版處理，并克隆到當(dāng)前的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）傳入到子節(jié)點(diǎn)。

ActionConst:

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

在定義scene類型活著action參數(shù)時(shí)，我們接受間斷的字符串文字，例如：

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:

但是當(dāng)傳入reducer時(shí)，它將被轉(zhuǎn)換成一個(gè)靜態(tài)值，為來一致性，我們推薦總是使用靜態(tài)的去替換字符串文字。

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可以理解為就是一堆常量去表示真實(shí)的各種各樣的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）,或者，你可以在一個(gè)scene type中設(shè)置她們的常量。當(dāng)你執(zhí)行Action.main()時(shí)，它將根據(jù)你的scene type或者默認(rèn)的一個(gè)去轉(zhuǎn)發(fā)給合適的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.

不是每個(gè)ActionConst都可以使用相同的方式（作為一個(gè)動(dòng)作使用，或者它是否可以在場景類型設(shè)置或不能），這就是為什么它只是一堆常量來掩蓋實(shí)際的值。（我的理解是在轉(zhuǎn)換為常量值的時(shí)候他會根據(jù)你定義的方式做分類，以此為依據(jù)進(jìn)行處理，后續(xù)會閱讀代碼以確認(rèn)～～）

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.

定義如何去增加一個(gè)新的屏幕到導(dǎo)航棧中?？梢允莗ush,modal,actionSheet，replace,switch,reset transitionToTop中的一個(gè)（相信前三個(gè)ios程序員將不會陌生，因?yàn)槲椰F(xiàn)在主要是作為android程序員，但是也搞過ios開發(fā)，所有都懂那么一點(diǎn)點(diǎn)，理解起來好像挺有幫助的～～）.默認(rèn)的是push。每一個(gè)Scene.type都會在ActionConst中存在一個(gè)對應(yīng)的常量，我們推薦總是使用常量來表示。

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

replace:告訴導(dǎo)航器使用一個(gè)新的route來替換當(dāng)前的route。

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

actionSheet:以彈出的方式展示一個(gè)Action Sheet，你必須傳入一個(gè)回調(diào)作為回調(diào)方法。

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:在導(dǎo)航組件后的路由棧中插入該類型定義的組件。它可以被作為一個(gè)彈出的提示框使用，也可以在任何導(dǎo)航傳輸之前（像登錄授權(quán)處理）做一些必須處理的操作進(jìn)行使用。我們可以使用Actions.dismiss()關(guān)閉它。（類似android原生種的dialog，ios中的模態(tài)視圖）。

switch: is used for tab screens.

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

reset: is similar toreplaceexcept it unmounts the componets in the navigator stack.

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

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

transitionToTop:如果路由有sceneConfig配置，如：，將根據(jù)name重置路由堆棧中的路由和動(dòng)畫。

Animation

PropertyTypeDefaultDescription

durationnumber

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

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

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

動(dòng)畫的方向 水平／垂直／左到右 （水平即從右到左）

animationstring

animation options when transitioning: 'fade' currently only option

在轉(zhuǎn)換時(shí)的動(dòng)畫選項(xiàng)，當(dāng)前只有fade（漸變）

animationStylefunction

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

用于場景轉(zhuǎn)換的可選內(nèi)插函數(shù)：animationStyle = {interpolationFunction}

applyAnimationfunction

optional if provided overrides the default spring animation

可選，如果提供將覆蓋默認(rèn)的彈簧動(dòng)畫

Gestures 手勢

PropertyTypeDefaultDescription

panHandlersobject

optional, provide null to disable swipe back gesture

可選的，置為null可以關(guān)閉滑動(dòng)返回手勢。

getPanHandlersfunctionoptionalOptionally override the gesture handlers for scene

可選的去重寫一個(gè)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的第一個(gè)參數(shù)和{hideNavBar，hideTabBar，isActive}的第二個(gè)參數(shù)。

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展示。如果沒有組件被定義，內(nèi)置的TabBar 將作為容器。所有的子場景都被包裹到自己的導(dǎo)航條中。

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

可以選擇重寫去定義包含每個(gè)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)

隱藏此場景的選項(xiàng)卡欄和任何后續(xù)場景，直到顯式反轉(zhuǎn)（如果內(nèi)置TabBar組件用作父渲染器）

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

當(dāng)另一個(gè)選項(xiàng)卡場景添加到導(dǎo)航堆棧時(shí)，隱藏被添加到當(dāng)行欄的場景的選項(xiàng)卡欄。

pressOpacitynumber0.2the opacity when clicking on the tab

點(diǎn)擊選項(xiàng)卡時(shí)的透明度，默認(rèn)0.2

Navigation Bar

PropertyTypeDefaultDescription

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

隱藏當(dāng)前scene的導(dǎo)航欄和后續(xù)scene直到明確的反轉(zhuǎn)該值。

navigationBarStyleView style

optional style override for the navigation bar

可以重寫該屬性去定義導(dǎo)航欄

navigationBarBackgroundImageImage source

optional background image for the navigation bar

重寫該屬性去設(shè)置導(dǎo)航欄的背景圖片

navBarReact.Component

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

通過該屬性設(shè)置自定義的導(dǎo)航欄。可以參考內(nèi)置的導(dǎo)航欄組件

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

Navigation Bar: Title 標(biāo)題

PropertyTypeDefaultDescription

titlestringnullThe title to be displayed in the navigation bar

設(shè)置導(dǎo)航欄標(biāo)題

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

根據(jù)state返回標(biāo)題

renderTitlefunctionoptionalOptionally closure to render the title

titleStyleText style

optional style override for the title element

重寫標(biāo)題的樣式

titleWrapperStyleView style

optional style override for the title wrapper

重寫包裹標(biāo)題的樣式

titleOpacitystringoptionalSet opacity for the title in navigation bar

在導(dǎo)航欄中設(shè)置不透明的標(biāo)題

titlePropsobjectnullAny other properties to be set on the title component

任何其他的屬性都會被設(shè)置到標(biāo)題組件上

Navigation Bar: Back button 導(dǎo)航條的返回按鈕

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

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

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

點(diǎn)擊返回按鈕時(shí)的行為，默認(rèn)是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