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

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)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！