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

在 上一章 http://cherylgood.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 参数时，我们接受间断的字符串文字，例如：

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

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