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:

PropertyTypeDefaultDescription
children   required 页面根组件
wrapBy   Function   允许集成诸如Redux(connect)和Mobx(observer)之类的状态管理方案
sceneStyle Style   适用于所有场景的Style(可选)
backAndroidHandler Function   允许在Android中自定义控制返回按钮(可选)

 

Scene:

此路由器的最重要的组件, 所有 <Scene> 组件必须要有一个唯一的 key。父节点<Scene>不能将component作为prop,因为它将作为其子节点的组件。

PropertyTypeDefaultDescription
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}>。

PropertyTypeDefaultDescription
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。

PropertyTypeDefaultDescription
icon component undefined 作为选项卡图标放置的React Native组件。
tabBarLabel string   tabbar上的文字。

Drawer (<Drawer> or <Scene drawer>)

用于实现抽屉的效果,如果要使用该组件需要设置 <drawer tabs={true}>。

PropertyTypeDefaultDescription
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()时,它将根据您的场景类型或默认值来执行动作。

PropertyTypeParametersDescription
[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转换,这些是优先于手动键入其值,因为项目更新时可能会发生更改。

PropertyTypeValueShorthand
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
posted @ 2018-01-03 09:54  不骄不傲  阅读(...)  评论(...编辑  收藏