react-native-router-flux使用详解(三)

  发布日期:   2017-06-01
  最新修改:   2020-10-17
  阅读次数:   133 次

在 上一章 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:

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

transitionToTop:如果路由有sceneConfig配置,如: <Route name="login" schema="modal" component={Login} type="transitionToTop"/>,将根据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 Viewstyle { 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 Viewstyle optional style override for the Tabs component可以选择重写去定义Tabs组件的样式
tabBarBackgroundImage Imagesource optional background image for the Tabs component可以选择重写去定义Tabs组件的背景图片
tabBarIconContainerStyle Viewstyle 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 Imagesource require('./back_chevron.png') Simple way to override the back button in the navBar
backButtonTextStyle Textstyle 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 Imagesource 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

   转载规则

《react-native-router-flux使用详解(三)字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。