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

在 上一章 http://cherylgood.cn/c/react_native_router_flux_使用详解二.php
我们主要进一步介绍了react-native-router-flux的使用，接下来主要讲解 其主要配置参数和api，当前我主要是翻译官网的学习资料进行学习，我将在后面的章节中实际使用他，通关编写一个rn版的微博app http://cherylgood.cn/c/React-Native学习之制作RN版的微博app.php

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