在 上一章http://cherylgood.cn/c/react_native_router_flux_使用详解二.php
我们主要进一步介绍了react-native-router-flux的使用,接下来主要讲解 其主要配置参数和api,当前我主要是翻译官网的学习资料进行学习,我将在后面的章节中实际使用他,通关编写一个rn版的微博apphttp://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 |
|
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 可以重写该方法去控制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. |
onExitApp | function |
optional | Optionally override the default action after back key is pressed on root scene. Return |
Scene:
Property | Type | Default | Description |
---|---|---|---|
key | string |
required 必须 | Will be used to call screen transition,for example, 在切换屏幕的时候会使用该key,例如Actions.name(params).key的值必须时唯一的。 |
component | React.Component |
semi-required | The 切换到该scene时,component属性定义的组件将被展示出来。当定义一个嵌套scene时不要求有。例如。如果他作为一个scene容器定义。他将被视作一个自定义容器渲染者来使用。 |
initial | bool |
false | Set to 如果设置该属性为true,该scene将最为默认初始化scene。你可以理解为进来后进一个看到的scene |
type | string |
or |
Defines how the new screen is added to the navigator stack. One of 定义如何去创建一个新的屏幕并放入导航栈中。可以是ActionConst.PUSH,AtionConst.JUMP,ActionConst.REPLACK,AtionConst.RESET.如果父容器是一个tabbar且tabs=true,将会自动设置为ActionConst.JUMP. |
clone | bool |
Scenes marked with 在被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,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 everyScene.type
string literal has a mapped constant in ActionConst,it is recommended to always use constant.
定义如何去增加一个新的屏幕到导航栈中。可以是push,actionSheet,replace,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 toreplace
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 可选的。充当在给定持续时间(以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:
|
|
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 可以覆盖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 定义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 |
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 providerenderBackButton prop.renderBackButton >leftTitle > |
|
getLeftTitle | function |
optional closure to display on the left if the prevIoUs route does not providerenderBackButton 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 |