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

在 上一章 http://catbro.cn/c/react_native_router_flux_使用详解二

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

Available imports

• Router
• Scene
• Modal
• TabBar
• getInitialState
• Reducer
• DefaultRenderer
• Switch
• Actions
• ActionConst
• NavBar

Router:

Scene:

ActionConst:

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

在定义scene类型活着action参数时，我们接受间断的字符串文字，例如：

1
2

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时，它将被转换成一个静态值，为来一致性，我们推荐总是使用静态的去替换字符串文字。

1
2

Actions.ROUTE_NAME({type: ActionConst.RESET});
<Scene key="myscene" type={ActionConst.REPLACE} >

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 <Route name="login" schema="modal" component={Login} type="transitionToTop" />

transitionToTop:如果路由有sceneConfig配置，如： <Route name="login" schema="modal" component={Login} type="transitionToTop"/>，将根据name重置路由堆栈中的路由和动画。

Animation

Gestures 手势

Scene styles 场景类型表

Tabs

Navigation Bar

Navigation Bar: Title 标题

Navigation Bar: Back button 导航条的返回按钮

Navigation Bar: Left button

Navigation Bar: Right button