所有的app设计,都会考虑导航的问题,android一般采用底部tabbar,但是最新的设计方案,更多的倾向于头部tabbar,或者头部scrollTabBar。本方案还是采用底部模式。
react-native最佳实践,推荐的解决方案, github地址 。
如何使用
react-native-router-flux 依赖于 ExNavigator ,所以首先要安装ex-navigator
安装ex-navigator
npm install @exponent/react-native-navigator --save
ExNavigator和Navigator之间的主要区别是可定制route。使用ExNavigator ,你可以定义每个scene的样子,其导航栏的内容应该是什么,当scene获得或失去焦点时自定义动作。
安装react-native-router-flux
npm i react-native-router-flux --save
安装 react-native-button
github上关注度很高的button控件,命令行安装
npm install react-native-button --save
Feature 特点
- 集中定义你的screens(routers),以及他们的转场动画
- 使用简单的语法调用转场,比如Action.login
- screens在转场时以前必须的navigator对象, 取消了
- 使用schema定义一组screens的公共属性,例如:定义一个name为modal的schema,来表示从底部弹出的转场动画
- show/hide 导航栏
- 支持使用tab bar ,使用 react-native-tabs
- 支持嵌套的navigators,比如,每个tab 都有自己的导航,转场动作将会自动的使用最上层的导航
Usage 用法
1 在index.js中,定义router,跟他的子节点route
- 如果你的部分screens有公共属性,请定义schema,来减少重复
2 在任何screen中
- import {Actions} from ‘react-native-router-flux’
- Actions.ACTION_NAME(PARAMS) 将被适当的调用,并将action跟params传递给route
Configuration 配置
Router:
Property | Type | Default | Description |
---|---|---|---|
header | object | null | optional header view |
footer | object | null | optional footer view (e.g. tab bar) |
hideNavBar | bool | false | hides navigation bar for every route |
Route:
Property | Type | Default | Description |
---|---|---|---|
name | string | required | 必须是唯一的,将在screen转场时调用.比如a场景name=’ima’,在b场景要跳转到a,就在b场景onPress事件调用Action.ima(传参),ps使用redux实现了统一管理state状态 |
component | React.Component | semi-required | 要显示在screen的主角,也可以嵌套router |
type | string | optional | 定义新screen如何被添加到navigation栈。有以下 push , modal , actionSheet , replace , switch , reset 模式。默认是’push’。 replace navigator用新route来replace 当前route. actionSheet 弹出 Action Sheet弹窗, 必须穿回掉函数做参数, 可以看一下demon学习. modal 在当前组件中,插入新组件. 用作在转场之前 (比如登录进程)弹出的提示框,屏蔽了下层的触摸操作。 switch 跟tabbar的screen配合使用. reset 用法接近replace,除了他要从navigatior stack中卸载. modal 组件用Actions.dismiss()来取消 |
initial | bool | false | 设置 true 本screen 为初始页 |
title | string | null | 在navigation bar中显示的标题 |
schema | string | optional | 预先在schema定义的属性 |
wrapRouter | bool | false | If true, the route is automatically nested in its own Router. Useful for modal screens. For type==switch wrapRouter will be true 设置为true 本route为自动嵌套到自己的router里,对于modal scene是有用的。 |
sceneConfig | Navigator.SceneConfigs | optional | 定义转场动画类型 |
defaultRoute | string | optional | 定义要跳转到哪个route,当本route作为tab被选中并点击的时候 |
hideNavBar | bool | false | 隐藏本route的navigation bar |
hideTabBar | bool | false | 隐藏本route的tabBar (当父router创建了tabbar并使用了, check Example) |
navigationBarStyle | View style | 继承自navigation bar 可选的style | |
titleStyle | Text style | optional style override for the title element | |
renderTitle | Closure | optional closure to render the title element | |
barButtonIconStyle | Image style | 继承自icon button可选的style (e.g. back icon) | |
leftTitle | string | 可选的,显示在left的文本(上一个roue没有提供 renderBackButton prop时使用) renderBackButton > leftTitle > previous route's title | |
renderLeftButton | Closure | optional closure to render the left title / buttons element | |
renderBackButton | Closure | optional closure to render back text or button if this route happens to be the previous route | |
leftButtonStyle | View style | optional style override for the container of left title / buttons | |
leftButtonTextStyle | Text style | optional style override for the left title element | |
rightTitle | string | optional string to display on the right. onRight must be provided for this to appear. | |
renderRightButton | Closure | optional closure to render the right title / buttons element | |
rightButtonStyle | View style | optional style override for the container of right title / buttons | |
rightButtonTextStyle | Text style | optional style override for the right title element |
Schema:
Property | Type | Default | Description |
---|---|---|---|
name | string | required | The name of the schema, to be referenced in the route as schema={"name"} |
property | - | - | A Schema can have any property that you want the Route to inherit 可以定义任何你想在route里面定义的属性 |