1. 程式人生 > >react-native-router-flux 使用詳解(三)

react-native-router-flux 使用詳解(三)

我們主要進一步介紹了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.PUSHActionConst.JUMPActionConst.REPLACEActionConst.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 { 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

optional style override for the Tabs component

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

tabBarBackgroundImage

optional background image for the Tabs component

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

tabBarIconContainerStyle

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

optional style override for the navigation bar

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

navigationBarBackgroundImage

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

optional style override for the title element

重寫標題的樣式

titleWrapperStyle

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 require('./back_chevron.png') Simple way to override the back button in the navBar
backButtonTextStyle 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 for left button
leftButtonIconStyle Image style for left button
leftButtonStyle optional style override for the container of left title / buttons
leftButtonTextStyle 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 for right button
rightButtonIconStyle Image style for right button
rightButtonStyle optional style override for the container of right title / buttons
rightButtonTextStyle optional style override for the right title element
...other props all properties that will be passed to your component instance