react-native-router-flux(基础内容)
react-native-router-flux
1.react-native-router-flux是一个第三方的路由组件,目前的最新V4版本已经基于react-navigation实现。
2.react-native-router-flux包含了官方推荐react-navigation一些没有实现的功能,如:modal,refresh等。
完整demo:https://github.com/lemonzwt/react-native-demo
Available imports
Router
Scene
Tabs
Tabbed Scene
Drawer
Modal
Lightbox
Actions
ActionConst
Router:
Property | Type | Default | Description |
---|---|---|---|
children | required | 页面根组件 | |
wrapBy |
Function |
允许集成诸如Redux(connect)和Mobx(observer)之类的状态管理方案 | |
sceneStyle |
Style |
适用于所有场景的Style(可选) | |
backAndroidHandler |
Function |
允许在Android中自定义控制返回按钮(可选) |
Scene:
此路由器的最重要的组件, 所有 <Scene> 组件必须要有一个唯一的 key。父节点<Scene>不能将component作为prop,因为它将作为其子节点的组件。
Property | Type | Default | Description |
---|---|---|---|
key |
string |
required |
将用于标识页面,例如Actions.name(params)。必须是独一无二的 |
component |
React.Component |
semi-required |
要显示的组件,定义嵌套时不需要Scene,参见示例。 |
back |
boolean |
false |
如果是true,则显示后退按钮,而不是由上层容器定义的左侧/drawer按钮。 |
backButtonImage |
string |
返回按钮的图片 | |
backButtonTintColor |
string |
后退按钮色调 | |
init |
boolean |
false |
true不显示后腿按钮 |
clone |
boolean |
false |
标有clone的场景将被视为模板,并在被推送时克隆到当前场景的父节点中。详情请参见示例 |
contentComponent |
React.Component |
用于呈现抽屉内容的组件(例如导航) | |
drawer |
boolean |
false |
载入DrawerNavigator内的子页面 |
failure |
Function |
如果on返回一个“falsey”值,那么failure将被调用。 | |
backTitle |
string |
指定场景的后退按钮标题 | |
backButtonTextStyle |
Style |
后退按钮的样式 | |
rightTitle |
string |
导航右侧按钮的标题 | |
headerMode |
string |
float |
指定标题应该如何呈现:(float渲染单个标题,保持在顶部,动画随着屏幕的变化,这是iOS上的常见样式。)screen(每个屏幕都有一个标题,并且标题淡入,与屏幕一起出现,这是Android上的常见模式)如果为none(不会显示标题) |
hideNavBar |
boolean |
false |
隐藏导航栏 |
hideTabBar |
boolean |
false |
隐藏标签栏(仅适用于拥有tabs指定的场景) |
hideBackImage |
boolean |
false |
隐藏返回图片 |
initial |
boolean |
false |
设置为true后,会默认显示该页面 |
leftButtonImage |
Image |
替换左侧按钮图片 | |
leftButtonTextStyle |
Style |
左侧按钮的文字样式 | |
leftButtonStyle |
Style |
左侧按钮样式 | |
leftButtonIconStyle |
Style |
左侧按钮icon样式 | |
modal |
boolean |
false |
将场景容器定义为modal,即所有子场景都将从底部弹起到顶部。它仅适用于containers(与v3版本的语法不同) |
navBar |
React.Component |
可以使用自定义的React组件来定义导航栏 | |
navBarButtonColor |
string |
设置导航栏返回按钮的颜色 | |
navigationBarStyle |
Style |
导航栏的样式 | |
navigationBarTitleImage |
Object |
导航栏中的图像中覆盖title的Image | |
navigationBarTitleImageStyle |
object |
navigationBarTitleImage的样式 | |
navTransparent |
boolean |
false |
导航栏是否透明 |
on |
Function |
又名 onEnter | |
onBack |
Function |
返回按钮事件 | |
onEnter |
Function |
当Scene要被跳转时调用。props将被作为参数提供。只支持定义了'component'的场景。 | |
onExit |
Function |
当Scene 要跳转离开时调用。只支持定义了'component'的场景。 |
|
onLeft |
Function |
当导航栏左侧按钮被点击时调用。 | |
onRight |
Function |
当导航右侧按钮被点击时调用。 | |
renderTitle |
React.Component |
使用React组件显示导航栏的title | |
renderLeftButton |
React.Component |
使用React组件显示导航栏的左侧按钮。 | |
renderRightButton |
React.Component |
使用React组件显示导航栏的右侧按钮 | |
renderBackButton |
React.Component |
使用React组件显示导航栏的返回按钮。 | |
rightButtonImage |
Image |
设置右侧按钮的图片。 | |
rightButtonTextStyle |
Style |
右侧按钮文字的样式 | |
success |
Function |
如果on返回一个"真实"的值,那么success将被调用。 | |
tabs |
boolean |
false |
将子场景加载为TabNavigator。其他标签导航器属性也是适用的。 |
title |
string |
要显示在导航栏中心的文本。 | |
titleStyle |
Style |
title的样式。 | |
type |
string |
push |
可选的导航操作。你可以使用replace来替换此场景中的当前场景 |
all other props | 此处未列出的其他属性将转交给Scene的component |
Tabs (<Tabs>
or <Scene tabs>
)
标签栏组件。
你可以使用<Scene>中的所有props来作为<Tabs>的属性。 如果要使用该组件需要设置 <Scene tabs={true}>。
Property | Type | Default | Description |
---|---|---|---|
wrap |
boolean |
true |
自动使用自己的导航栏包装每个场景(如果不是另一个容器)。 |
activeBackgroundColor |
string |
指定焦点的选项卡的选中背景颜色。 | |
activeTintColor |
string |
指定标签栏图标的选中色调颜色。 | |
inactiveBackgroundColor |
string |
指定非焦点的选项卡的未选中背景颜色。 | |
inactiveTintColor |
string |
指定标签栏图标的未选中色调颜色。 | |
labelStyle |
object |
设置tabbar上文字的样式。 | |
lazy |
boolean |
false |
在选项卡处于活动状态之前,不会渲染选项卡场景(推荐设置成true)。 |
tabBarComponent |
React.Component |
使用React组件以自定义标签栏 | |
tabBarPosition |
string |
指定标签栏位置。iOS上默认为bottom,安卓上是top。 | |
tabBarStyle |
object |
标签栏的样式。 | |
tabStyle |
object |
单个选项卡的样式。 | |
showLabel |
boolean |
true |
是否显示标签栏文字。 |
swipeEnabled |
boolean |
false |
是否可以滑动选项卡。 |
tabBarOnPress |
function |
自定义tabbar点击事件。 | |
backToInitial |
boolean |
false |
如果选项卡图标被点击,返回到默认选项卡。 |
Stack (<Stack>
)
将场景组合在一起的组件,用于自己的基于堆栈实现的导航。使用它将为此堆栈创建一个单独的navigator,因此,除非您添加hideNavBar,否则将会出现两个导航条。
Tab Scene (child <Scene>
within Tabs
)
用于实现Tabs的效果展示,可以自定义icon和label。
Property | Type | Default | Description |
---|---|---|---|
icon |
component |
undefined |
作为选项卡图标放置的React Native组件。 |
tabBarLabel |
string |
tabbar上的文字。 |
Drawer (<Drawer>
or <Scene drawer>
)
用于实现抽屉的效果,如果要使用该组件需要设置 <drawer tabs={true}>。
Property | Type | Default | Description |
---|---|---|---|
drawerImage |
Image |
替换抽屉'hamburger'图标,你必须把它与drawer一起设置。 | |
drawerIcon |
React.Component |
用于抽屉'hamburger'图标的任意组件,您必须将其与drawer道具一起设置。 | |
hideDrawerButton |
boolean |
false |
是否显示drawerImage或者drawerIcon。 |
drawerPosition |
string |
left |
抽屉是在右边还是左边。可选属性right或left。 |
drawerWidth |
number |
抽屉的宽度(以像素为单位)(可选)。 |
Modals (<Modal>
or <Scene modal>
)
想要实现模态,您必须将其<Modal>作为您Router的根场景。在Modal将正常呈现第一个场景(应该是你真正的根场景),它将渲染第一个元素作为正常场景,其他所有元素作为弹出窗口(当它们 被push)。
示例:在下面的示例中,root场景嵌套在<Modal>中,因为它是第一个嵌套Scene,所以它将正常呈现。如果要push到statusModal,errorModal或者loginModal,他们将呈现为Modal,默认情况下会从屏幕底部向上弹出。重要的是要注意,目前Modal不允许透明的背景。
//... 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是用于将组件渲染在当前组件上Scene的组件 。与Modal不同,它将允许调整大小和背景的透明度。
示例:
在下面的示例中,root场景嵌套在中<Lightbox>,因为它是第一个嵌套Scene,所以它将正常呈现。如果要push到loginLightbox,他们将呈现为Lightbox,默认情况下将放置在当前场景的顶部,允许透明的背景。
//... 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
该对象的主要工具是为您的应用程序提供导航功能。 假设您的Router和Scenes配置正确,请使用下列属性在场景之间导航。 有些提供添加的功能,将React道具传递到导航场景。
这些可以直接使用,例如,Actions.pop()将在源代码中实现的操作,或者,您可以在场景类型中设置这些常量,当您执行Actions.main()时,它将根据您的场景类型或默认值来执行动作。
Property | Type | Parameters | Description |
---|---|---|---|
[key] |
Function |
Object |
Actions将'自动'使用路由器中的场景key进行导航。如果需要跳转页面,可以直接使用Actions.key()或Actions[key].call()。 |
currentScene |
String |
返回当前活动的场景。 | |
jump |
Function |
(sceneKey: String, props: Object) |
用于切换到新选项卡。 |
pop |
Function |
回到上一个页面。 | |
popTo |
Function |
(sceneKey: String, props: Object) |
返回到指定的页面。 |
push |
Function |
(sceneKey: String, props: Object) |
跳转到新页面。 |
refresh |
Function |
(props: Object) |
从堆栈中弹出当前场景,并将新场景推送到导航堆栈。没有过度动画。 |
replace |
Function |
(sceneKey: String, props: Object) |
替换当前场景,没有动画。 |
reset |
Function |
(sceneKey: String, props: Object) |
清除路由堆栈并将场景推入第一个索引. 没有过渡动画。 |
drawerOpen |
Function |
如果可用,打开Drawer。 | |
drawerClose |
Function |
如果可用,关闭Drawer。 |
ActionConst
键入常量以确定Scene转换,这些是优先于手动键入其值,因为项目更新时可能会发生更改。
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 |