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