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

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

react-native-router-flux实战详解(一)

Demo示例

github.com/guangqiang-…

官方经常使用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 , syntatic sugar for

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

官方地址

github.com/aksonov/rea…

官方API

github.com/aksonov/rea…

参考文献

www.cnblogs.com/yz1311/p/60… blog.csdn.net/jiecsdn/art… blog.csdn.net/jiecsdn/art… blog.csdn.net/jiecsdn/art…

更多文章

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

小伙伴们扫下方二维码加入RN技术交流QQ群