react-native-router-flux是一个在react-native上面的路由组件,虽然官方也有路由组件,但是此款路由组件是进行在次封装更易与使用和维护,对第三方路由组件整理此插件中文文档
本文以文档介绍为主,每个API可能不定期更新会单独写文章使用篇,简单使用可能会比较少写,到时候会链接到相应API文档下面方便查阅。
简单演示路由使用案例:
其中,key 是页面的标签,供Actions使用;component 设置关联的页面 ;title 是页面的标题;initial 表示设置默认页面。
PageOne页面的核心代码如下:
此处,我们导入了Action的包,此API主要用来处理页面跳转。PageTwo页面的源码如下:
除了例子中使用到的API或配置外,react-native-router-flux支持的配置或API如下:
Router、Scene、Tabs、Stack
Tabbed Scene、Drawer
Modal、Lightbox
Actions、ActionConst
例如,下面是backAndroidHandler用法的例子:
LegacyTabs(
LegacyTabs的使用和 Stack (
将场景组合在一起的组件,用于自己的基于堆栈实现的导航。使用它将为此堆栈创建一个单独的navigator,因此,除非您添加hideNavBar,否则将会出现两个导航条。
Drawer (
用于实现抽屉的效果,如果要使用该组件需要设置
Modals (
想要实现模态,您必须将其作为您Router的根场景。在Modal将正常呈现第一个场景(应该是你真正的根场景),它将渲染第一个元素作为正常场景,其他所有元素作为弹出窗口。
示例:在下面的示例中,root场景嵌套在中,因为它是第一个嵌套Scene,所以它将正常呈现。如果要push到statusModal,errorModal或者loginModal,他们将呈现为Modal,默认情况下会从屏幕底部向上弹出。重要的是要注意,目前Modal不允许透明的背景。
Lightbox (
Lightbox是用于将组件渲染在当前组件上Scene的组件 。与Modal不同,它将允许调整大小和背景的透明度。
示例:
在下面的示例中,root场景嵌套在中,因为它是第一个嵌套Scene,所以它将正常呈现。如果要push到loginLightbox,他们将呈现为Lightbox,默认情况下将放置在当前场景的顶部,允许透明的背景。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import {Router, Scene} from "react-native-router-flux"; import PageOne from "./Component/PageOne"; import PageTwo from "./Component/PageTwo"; const Root = () => { return ( <Router> <Scene key="root"> <Scene key="one" component={PageOne} title="PageOne" initial={true} /> <Scene key="two" component={PageTwo} title="PageTwo" /> </Scene> </Router> ); }; |
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Actions } from 'react-native-router-flux'; const PageOne = () => { return ( <View style={styles.container}> <Text style={styles.welcome} onPress={()=>Actions.two()} > 我是Page One </Text> </View> ); }; |
1 2 3 4 5 6 7 8 |
export default class PageTwo extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}>我是Page Two </Text> </View>) } } |
Router:
Property | Type | Default | Description |
---|---|---|---|
backAndroidHandler | Function | 允许在Android中自定义控制返回按钮(可选)。有关更多信息,请查看 BackHandler. | |
children | semi-required | 页面根组件 | |
navigator | Class | 使用Actions.create创建应用导航器, 支持集成Redux | |
onStateChange | Function | 每次导航状态更改时都会调用此函数。对于mobx观察框架尤为有效(可以参考Actions.currentScene的用法) | |
sceneStyle | Style | 适用于所有场景的Style(可选) | |
uriPrefix | string | 通过uri来深层链接,从App外跳入App内的某个页面. | |
wrapBy | Function | 允许集成诸如Redux(connect)和Mobx(observer)之类的状态管理方案 |
1 2 3 4 5 6 7 8 9 |
const onBackPress = () => { if (Actions.state.index !== 0) { return false } Actions.pop() return true } backAndroidHandler={onBackPress} |
Scene:
此组件是路由器的最重要的组件, 所有 Scene组件必须要有一个唯一的 key。父节点Scene不能将component作为prop,因为它将作为其子节点的组件。Property | Type | Default | Description |
---|---|---|---|
key | string | required | 用于标识页面,例如Actions.name(params)。必须是独一无二的 |
path | string | 将被用来匹配传入的深层链接和传递参数,例如:/user/:id/将从/user/1234/用params {id:1234}调用场景的操作。接受uri的模板标准可以参考下面的链接 | |
component | React.Component | semi-required | 要显示的组件,定义嵌套时不需要Scene,参见示例 |
back | boolean | false | 如果是true,则显示后退按钮,而不是由上层容器定义的左侧/drawer按钮. |
backButtonImage | string | 设置返回按钮的图片 | |
backButtonTextStyle | Style | 用于返回按钮文本的样式 | |
backButtonTintColor | string | 自定义后退按钮色调 | |
backTitle | string | 指定后退按钮标题 | |
backTitleEnabled | boolean | 是否禁用返回标题 | |
clone | boolean | false | 标有clone的场景将被视为模板,并在被推送时克隆到当前场景的父节点中. |
contentComponent | React.Component | 用于呈现抽屉内容的组件. | |
drawer | boolean | false | 载入DrawerNavigator内的子页面DrawerNavigator |
drawerLockMode | enum(‘unlocked’, ‘locked-closed’, ‘locked-open’) | 指定抽屉的锁模式lock mode of the drawer | |
failure | Function | 如果on返回一个“falsey”值,那么failure将被调用. | |
headerMode | string | float | 指定标题应该如何呈现:(float渲染单个标题,保持在顶部,动画随着屏幕的变化,这是iOS上的常见样式。)screen(每个屏幕都有一个标题,并且标题淡入,与屏幕一起出现,这是Android上的常见模式)如果为none(不会显示标题) |
headerLayoutPreset | string | center | left |
hideBackImage | boolean | false | 隐藏返回图片 |
hideNavBar | boolean | false | 隐藏导航栏 |
init | boolean | false | 如果是true后退按钮不会显示 |
initial | boolean | false | 设置为true后,会默认显示该页面 |
leftButtonIconStyle | Style | 左侧按钮的图标样式 | |
leftButtonImage | Image | 左侧按钮图片 | |
leftButtonStyle | Style | 左侧按钮的样式 | |
leftButtonTextStyle | Style | 左侧按钮的文字样式 | |
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 | 当导航栏右侧按钮被点击时调用. | |
renderBackButton | React.Component | 使用React组件显示导航栏的返回按钮 | |
renderLeftButton | React.Component | 使用React组件显示导航栏的左侧按钮 | |
renderRightButton | React.Component | 使用React组件显示导航栏的右侧按钮 | |
renderTitle | React.Component | 使用React组件显示导航栏的title | |
rightButtonImage | Image | 设置右侧按钮的图片 | |
rightButtonStyle | Style | 右侧图片按钮样式 | |
rightButtonTextStyle | Style | 右侧按钮文字的样式 | |
rightTitle | string | 为场景指定右侧的按钮标题 | |
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 |
---|---|---|---|
activeBackgroundColor | string | 指定焦点的选项卡的选中背景颜色 | |
activeTintColor | string | 指定标签栏图标的选中色调颜色 | |
backToInitial | boolean | false | 如果选项卡图标被点击,返回到默认选项卡。 |
hideTabBar | boolean | false | 隐藏标签栏(仅适用于拥有tabs指定的场景) |
inactiveBackgroundColor | string | 指定非焦点的选项卡的未选中背景颜色 | |
inactiveTintColor | string | 指定标签栏图标的未选中色调颜色 | |
indicatorStyle | object | 覆盖活动选项卡指示器的样式. | |
labelStyle | object | 设置tabbar上文字的样式 | |
lazy | boolean | false | 在选项卡处于活动状态之前,不会渲染选项卡场景(推荐设置成true) |
showLabel | boolean | true | 是否显示标签栏文字 |
tabBarComponent | React.Component | 使用React组件以自定义标签栏 | |
tabBarOnPress | function | 自定义tabbar点击事件. | |
tabBarPosition | string | 指定标签栏位置。iOS上默认为bottom,安卓上是top. | |
tabBarStyle | object | 标签栏样式 | |
tabStyle | object | 单个选项卡样式 | |
upperCaseLabel | boolean | true | 是否使标签大写,默认为真. |
wrap | boolean | true | 自动使用自己的导航栏包装每个场景(如果不是另一个容器. |
LegacyTabs(<LegacyTabs>
or <Scene tabs={true} legacy={true}>
)
LegacyTabs的使用和 <Scene>
类似,也可以使用类似于如下的语法糖<Scene tabs={true} legacy={true}>
.
Stack ( <Stack>
)
将场景组合在一起的组件,用于自己的基于堆栈实现的导航。使用它将为此堆栈创建一个单独的navigator,因此,除非您添加hideNavBar,否则将会出现两个导航条。
Tab Scene (child within Tabs)
用于实现Tabs的效果展示,可以自定义icon和label。Property | Type | Default | Description |
---|---|---|---|
icon | component | undefined | 作为选项卡图标放置的RN组件 |
tabBarLabel | string | tabbar上的文字 |
Drawer (<Drawer>
or <Scene drawer>
)
用于实现抽屉的效果,如果要使用该组件需要设置<Scene drawer={true}>
Property | Type | Default | Description |
---|---|---|---|
drawerIcon | React.Component | 用于设置抽屉图标的任意组件,您必须将其与drawer道具一起设置 | |
drawerImage | Image | 替换抽屉图标,你必须把它与drawer一起设置 | |
drawerPosition | string | left | 抽屉是在右边还是左边。可选属性right或left |
drawerWidth | number | 抽屉的宽度(以像素为单位) | |
hideDrawerButton | boolean | false | 是否显示drawerImage或者drawerIcon |
Modals (<Modal>
or <Scene modal>
)
想要实现模态,您必须将其作为您Router的根场景。在Modal将正常呈现第一个场景(应该是你真正的根场景),它将渲染第一个元素作为正常场景,其他所有元素作为弹出窗口。
示例:在下面的示例中,root场景嵌套在中,因为它是第一个嵌套Scene,所以它将正常呈现。如果要push到statusModal,errorModal或者loginModal,他们将呈现为Modal,默认情况下会从屏幕底部向上弹出。重要的是要注意,目前Modal不允许透明的背景。
1 2 3 4 5 6 7 8 9 10 11 12 |
//... 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场景嵌套在中,因为它是第一个嵌套Scene,所以它将正常呈现。如果要push到loginLightbox,他们将呈现为Lightbox,默认情况下将放置在当前场景的顶部,允许透明的背景。
1 2 3 4 5 6 7 8 9 10 11 12 |
//... 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 | Default | Description |
---|---|---|---|
[key] | Function | Object | Actions将’自动’使用路由器中的场景key进行导航。如果需要跳转页面,可以直接使用Actions.key()或Actions[key].call(). |
create | React.Element | 通过“场景”创建你的应用导航器。它是替代路由器创建方法,主要用于Redux集成 | |
currentScene | String | 返回当前活动的场景 | |
drawerClose | Function | 如果可用,关闭Drawer | |
drawerOpen | Function | 如果可用,打开Drawer | |
jump | Function | (sceneKey: String, props: Object) | 用于切换到新选项卡,只能作用于Tabs . |
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) | 清除路由堆栈并将场景推入第一个索引. 没有过渡动画. |
ActionConst
Property | Type | Default | Description |
---|---|---|---|
ActionConst.ANDROID_BACK |
string |
‘REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK’ | N/A |
ActionConst.BACK_ACTION |
string |
‘REACT_NATIVE_ROUTER_FLUX_BACK_ACTION’ | pop |
ActionConst.BACK |
string |
‘REACT_NATIVE_ROUTER_FLUX_BACK’ | pop |
ActionConst.BLUR |
string |
‘REACT_NATIVE_ROUTER_FLUX_BLUR’ | N/A |
ActionConst.FOCUS |
string |
‘REACT_NATIVE_ROUTER_FLUX_FOCUS’ | N/A |
ActionConst.JUMP |
string |
‘REACT_NATIVE_ROUTER_FLUX_JUMP’ | jump |
ActionConst.POP_TO |
string |
‘REACT_NATIVE_ROUTER_FLUX_POP_TO’ | popTo |
ActionConst.PUSH_OR_POP |
string |
‘REACT_NATIVE_ROUTER_FLUX_PUSH_OR_POP’ | push |
ActionConst.PUSH |
string |
‘REACT_NATIVE_ROUTER_FLUX_PUSH’ | push |
ActionConst.REFRESH |
string |
‘REACT_NATIVE_ROUTER_FLUX_REFRESH’ | refresh |
ActionConst.REPLACE |
string |
‘REACT_NATIVE_ROUTER_FLUX_REPLACE’ | replace |
ActionConst.RESET |
string |
‘REACT_NATIVE_ROUTER_FLUX_RESET’ | reset |