react-native-router-flux 组件使用详解(二)

字数 1098阅读 4610

react-native-router-flux组件基础使用教程分为一二两部分教程。教程一主要讲解router-flux的使用方式,教程二主router-flux官方提供的各种API。

react-native-router-flux 组件用法详解(一)

Demo示例

https://github.com/guangqiang-liu/react-native-routerFluxDemo

官方常用API

Available imports

  • Router
  • Scene
  • Tabs
  • Tabbed Scene
  • Drawer
  • Modal
  • Lightbox
  • Actions
  • ActionConst

Router

Property Type Default Description
createReducer Function 该函数功能:createReducer({initialState, scenes})将返回一个reducer,你可以用你自定义的reducer绑定一个Reducer(param),可以参看下面章节中Flux的用例
dispatch Function
state object
scenes Function Style applied to all scenes (optional)
navigator Function
wrapBy Function function to wrap each Scene component and nav bar buttons - allows easy MobX integration (by passing observer)
getSceneStyle Function 根据需要重写该样式去改变导航卡的动画。
sceneStyle object
children React.Component required Scene root element
backAndroidHandler Function 可以重写该方法去控制android设备的返回键,返回true时会停留在app内部,返回false时会直接退出app,默认的操作是从栈中移除栈顶的scene,如果该scene是最后一个,就会退出app

Scene

Property Type Default Description
key string required 在切换屏幕的时候会使用该key,例如Actions.name(params)。key的值必须时唯一的。
component nt React.Component semi-required 切换到该scene时,component属性定义的组件将被展示出来。当定义一个嵌套的scene时不要求有。例如。如果他作为一个scene容器定义。他将被视作一个自定义容器渲染者来使用。
initial bool false 如果设置该属性为true,该scene将成为默认初始化scene。你可以理解为进来后进一个看到的scene
type string push 定义如何去创建一个新的屏幕并放入导航栈中。可以是ActionConst.PUSH,AtionConst.JUMP,ActionConst.REPLACK,AtionConst.RESET.如果父容器是一个tabbar且tabs=true,将会自动设置为ActionConst.JUMP
clone boolean false 在被push的时候,使用clone标识的Scenes将被作为模版处理,并克隆到当前的scene的容器中。
all other props

Stack (<Stack>)

A component to group Scenes together for its own stack based navigation. Using this will create a separate navigator for this stack, so expect two navbars to appear unless you add hideNavBar.

Tab Scene (child <Scene> within Tabs)

Property Type Default Description
icon component a React Native component to place as a tab icon
tabBarLabel string The string to override a tab label

Drawer(<Drawer> or <Scene drawer>)

Can use all prop as listed in Scene as <Drawer>, syntatic sugar for <Scene drawer={true}>

Property Type Default Description
drawerImage Image Image to substitute drawer 'hamburger' icon, you have to set it together with drawer prop
drawerIcon React.Component Arbitrary component to be used for drawer 'hamburger' icon, you have to set it together with drawer prop
hideDrawerButton boolean false Boolean to show or not the drawerImage or drawerIcon
drawerPosition string left Determines whether the drawer is on the right or the left. Keywords accepted are right and left
drawerWidth number The width, in pixels, of the drawer (optional)

Modals (<Modal> or <Scene modal>)

To implement a modal, you must use <Modal> as the root scene in your Router. The Modal will render the first scene (should be your true root scene) normally, and all following To display a modal use <Modal> as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed).

Example: In the example below, the root Scene is nested within a <Modal>, since it is the first nested Scene, it will render normally. If one were to push to statusModal, errorModal or loginModal, they will render as a Modal and by default will pull up from the bottom of the screen. It is important to note that currently the Modal does not allow for transparent backgrounds.

//... import components
<Router>
  <Modal>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
    <Scene key="errorModal" component={ErrorModal} />
    <Scene key="loginModal" component={LoginModal} />
  </Modal>
</Router>

Lightbox (<Lightbox>)

Lightbox is a component used to render a component on top of the current Scene. Unlike modal, it will allow for resizing and transparency of the background.

Example: In the example below, the root Scene is nested within a <Lightbox>, since it is the first nested Scene, it will render normally. If one were to push to loginLightbox, they will render as a Lightbox and by default will lay on top of the current Scene allowing for transparent backrounds.

//... import components
<Router>
  <Lightbox>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>

    {/* Lightbox components will lay over the screen, allowing transparency*/}
    <Scene key="loginLightbox" component={loginLightbox} />
  </Lightbox>
</Router>

Actions

This Object is the main utility is to provide navigation features to your application. Assuming your Router and Scenes are configured properly, use the properties listed below to navigate between scenes. Some offer the added functionality to pass React props to the navigated scene.

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.

Property Type Default Description
[key] Function Object The Actions object "automagically" uses the Scene's key prop in the Router to navigate. To navigate to a scene, call Actions.key() or Actions[key].call().
currentScene String Returns the current scene that is active
jump Function (sceneKey: String, props: Object) used to switch to a new tab. For Tabs only.
pop Function Go back to the previous scene by "popping" the current scene off the nav stack
popTo Function (sceneKey: String, props: Object) Pops the navigation stack until the Scene with the specified key is reached.
push Function (sceneKey: String, props: Object) Pushes the scene to the stack, performing a transition to the new scene.
refresh Function (props: Object) Reloads the current scene by loading new props into the Scene
replace Function (sceneKey: String, props: Object) Pops the current scene from the stack and pushes the new scene to the navigation stack. *No transition will occur.
reset Function (sceneKey: String, props: Object) Clears the routing stack and pushes the scene into the first index. No transition will occur.
drawerOpen Function Opens the Drawer if applicable
drawerClose Function Closes the Drawer if applicable

ActionConst

在定义scene类型或者action参数时,我们可以指定类型

Actions.ROUTE_NAME({type: 'reset'})

<Scene key="myscene" type="replace" >

但是当传入reducer时,它将被转换成一个静态常量值,为了一致性,我们推荐总是使用常量的去替换字符串

Actions.ROUTE_NAME({type: ActionConst.RESET})

<Scene key="myscene" type={ActionConst.REPLACE} >

Type constants to determine Scene transitions, These are PREFERRED over typing their values manually as these are subject to change as the project is updated.

Property Type Value Shorthand
ActionConst.JUMP string REACT_NATIVE_ROUTER_FLUX_JUMP jump
ActionConst.PUSH string REACT_NATIVE_ROUTER_FLUX_PUSH push
ActionConst.PUSH_OR_POP string REACT_NATIVE_ROUTER_FLUX_PUSH_OR_POP push
ActionConst.REPLACE string REACT_NATIVE_ROUTER_FLUX_REPLACE replace
ActionConst.BACK string REACT_NATIVE_ROUTER_FLUX_BACK pop
ActionConst.BACK_ACTION string REACT_NATIVE_ROUTER_FLUX_BACK_ACTION pop
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 N/A
ActionConst.BLUR string REACT_NATIVE_ROUTER_FLUX_BLUR N/A
ActionConst.ANDROID_BACK string REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK N/A
  • replace:告诉导航器使用一个新的route来替换当前的route
  • actionSheet:以弹出的方式展示一个Action Sheet,你必须传入一个回调作为回调方法。
  • modal:在导航组件后的路由栈中插入该类型定义的组件。它可以被作为一个弹出的提示框使用,也可以在任何导航传输之前(像登录授权处理)做一些必须处理的操作进行使用。我们可以使用Actions.dismiss()关闭它。(类似android原生种的* dialog,ios中的模态视图)。
  • switch:在tab 场景下使用。(一般是点击底部按钮切换不同的scene)。
  • reset:类似replace,但是它在导航栈中卸载了该组件。
  • transitionToTop:如果路由有sceneConfig配置,如: ,将根据name重置路由堆栈中的路由和动画。

Animation

Property Type Default Description
duration number 可选的。 充当在给定持续时间(以ms为单位)中使用Animated.timing编写applyAnimation函数的快捷方式。
direction string horizontal 动画的方向 水平/垂直/左到右 (水平即从右到左)
animation string 在转换时的动画选项,当前只有fade(渐变)
animationStyle function 用于场景转换的可选内插函数:animationStyle = {interpolationFunction}
applyAnimation function 可选,如果提供将覆盖默认的弹簧动画

Gestures(手势)

Property Type Default Description
panHandlers object 可选的,置为null可以关闭滑动返回手势。
getPanHandlers function 可选的去重写一个scene的手势操作

Scene styles

Property Type Default Description
sceneStyle style { flex: 1 } 场景组件的可选样式覆盖
getSceneStyle function 可以覆盖NavigationCard的Animated.View渲染场景的样式。 接收NavigationSceneRendererProps的第一个参数和{hideNavBar,hideTabBar,isActive}的第二个参数。

Tabs (<Tabs> or <Scene tabs>)

Property Type Default Description
tabs bool false 定义TabBar场景容器以便子场景可以作为tabs展示。如果没有组件被定义,内置的TabBar 将作为容器。所有的子场景都被包裹到自己的导航条中。
tabBarStyle style 可以选择重写去定义Tabs组件的样式
tabBarBackgroundImage string 可以选择重写去定义Tabs组件的背景图片
tabBarIconContainerStyle style 可以选择重写去定义包含每个tab icon的vie容器的样式
hideTabBar bool false 隐藏此场景的选项卡栏和任何后续场景,直到显式反转(如果内置TabBar组件用作父渲染器)
hideOnChildTabs bool false 当另一个选项卡场景添加到导航堆栈时,隐藏被添加到当行栏的场景的选项卡栏。
pressOpacity number 0.2 点击选项卡时的透明度,默认0.2

Navigation Bar

Property Type Default Description
hideNavBar bool false 隐藏当前scene的导航栏
navigationBarStyle style 可以重写该属性去定义导航栏
navigationBarBackgroundImage string 重写该属性去设置导航栏的背景图片
navBar React.Component 通过该属性设置自定义的导航栏。可以参考内置的导航栏组件
drawerImage string require('./menu_burger.png')

Navigation Bar(Title)

Property Type Default Description
title string 设置导航栏标题
getTitle function 根据state返回标题
renderTitle function Optionally closure to render the title
titleStyle Text style 重写标题的样式
titleOpacity string 在导航栏中设置不透明的标题
titleProps object 任何其他的属性都会被设置到标题组件上

Navigation Bar(Back button)

Property Type Default Description
backTitle string optional string to display with back button
renderBackButton function 如果该路由恰好是之前的路由,关闭重新渲染返回按钮文字或者按钮的行为
backButtonImage string optional style override for the back title element
hideBackImage boolean false 隐藏返回按钮图片
onBack function Actions.pop 点击返回按钮时的行为,默认是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

官方地址

https://github.com/aksonov/react-native-router-flux

官方API

https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md

参考文献

http://www.cnblogs.com/yz1311/p/6086234.html
http://blog.csdn.net/jiecsdn/article/details/58652511
http://blog.csdn.net/jiecsdn/article/details/58721919
http://blog.csdn.net/jiecsdn/article/details/59057026

更多文章

  • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
  • 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群(600+ RN工程师):620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!

推荐阅读更多精彩内容