更多分享请看：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