react-native-router-flux路由库组件中文文档整理

react-native-router-flux是一个在react-native上面的路由组件，虽然官方也有路由组件，但是此款路由组件是进行在次封装更易与使用和维护，对第三方路由组件整理此插件中文文档本文以文档介绍为主，每个API可能不定期更新会单独写文章使用篇，简单使用可能会比较少写，到时候会链接到相应API文档下面方便查阅。简单演示路由使用案例：

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>
  );
};

import {Router, Scene} from "react-native-router-flux";

import PageOne from "./Component/PageOne";

import PageTwo from "./Component/PageTwo";

const Root = () => {

return (

<Scene

key="one"

component={PageOne}

title="PageOne"

initial={true}

</Scene>

</Router>

);

};

其中，key 是页面的标签，供Actions使用；component 设置关联的页面；title 是页面的标题；initial 表示设置默认页面。 PageOne页面的核心代码如下：

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>
  );
};

import { Actions } from 'react-native-router-flux';

const PageOne = () => {

return (

<Text style={styles.welcome}

onPress={()=>Actions.two()} >

我是Page One

</Text>

</View>

);

};

此处，我们导入了Action的包，此API主要用来处理页面跳转。PageTwo页面的源码如下：

export default class PageTwo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>我是Page Two </Text>
            </View>)
    }
}

export default class PageTwo extends Component {

render() {

return (

<Text style={styles.welcome}>我是Page Two </Text>

</View>)

}

除了例子中使用到的API或配置外，react-native-router-flux支持的配置或API如下： Router、Scene、Tabs、Stack Tabbed Scene、Drawer Modal、Lightbox Actions、ActionConst

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）之类的状态管理方案

例如，下面是backAndroidHandler用法的例子：

const onBackPress = () => {
    if (Actions.state.index !== 0) {
      return false
    }
    Actions.pop()
    return true
}

backAndroidHandler={onBackPress}

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不允许透明的背景。

//... 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>

//... import components

<Modal>

</Scene>

</Modal>

</Router>

Lightbox (`<Lightbox>`)

Lightbox是用于将组件渲染在当前组件上Scene的组件。与Modal不同，它将允许调整大小和背景的透明度。示例：在下面的示例中，root场景嵌套在中，因为它是第一个嵌套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>

//... import components

</Scene>

{/* Lightbox components will lay over the screen, allowing transparency*/}

</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`

react-native-router-flux路由库组件中文文档整理

Router:

Scene:

Tabs (<Tabs> or <Scene tabs>)

LegacyTabs(`<LegacyTabs>` or `<Scene tabs={true} legacy={true}>`)

Stack ( `<Stack>` )

Tab Scene (child within Tabs)

Drawer (`<Drawer>` or `<Scene drawer>`)

Modals (`<Modal>` or `<Scene modal>`)

Lightbox (`<Lightbox>`)

Actions

ActionConst

发表评论取消回复

Add 浆糊之家 to your Homescreen!

Router:

Scene:

Tabs (<Tabs> or <Scene tabs>)

LegacyTabs(<LegacyTabs> or <Scene tabs={true} legacy={true}>)

Stack ( <Stack> )

Tab Scene (child within Tabs)

Drawer (<Drawer> or <Scene drawer>)

Modals (<Modal> or <Scene modal>)

Lightbox (<Lightbox>)

Actions

ActionConst

发表评论 取消回复

Add 浆糊之家 to your Homescreen!

LegacyTabs(`<LegacyTabs>` or `<Scene tabs={true} legacy={true}>`)

Stack ( `<Stack>` )

Drawer (`<Drawer>` or `<Scene drawer>`)

Modals (`<Modal>` or `<Scene modal>`)

Lightbox (`<Lightbox>`)

发表评论取消回复