react-native基础：导航之react-native-router-flux

发表于   |   分类于   |  

react-native-router-flux

所有的app设计，都会考虑导航的问题，android一般采用底部tabbar，但是最新的设计方案，更多的倾向于头部tabbar,或者头部scrollTabBar。本方案还是采用底部模式。

react-native-router-flux是推荐的解决方案，github地址。

如何使用

react-native-router-flux依赖于ExNavigator,所以首先要安装ex-navigator

新版本已经全部替换成react-native的Navigation api了。

安装ex-navigator

1
npm install @exponent/react-native-navigator --save

ExNavigator和Navigator之间的主要区别是可定制route。使用ExNavigator ，你可以定义每个scene的样子，其导航栏的内容应该是什么，当scene获得或失去焦点时自定义动作。

安装react-native-router-flux

1
npm i react-native-router-flux --save

安装react-native-button

github上关注度很高的button控件，命令行安装

1
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 都有自己的导航，转场动作将会自动的使用最上层的导航

New Features and Highlights

  • 可嵌套的Navigator（e.g. Each tab can have its own navigator, nested in a root navigator）
  • 自定义场景render for action sheet,native TabbarIOS.
  • Dynamic Routing :allows you 根据application state来选择要render哪个scene(see the Switch renderer, useful for authentication).
  • 为navigation state带来你自定义的reduce，也就是说可以用reduce管理navigation state
  • Reset History Stack：reset模式能够clear历史栈，并清除navbar back button
  • 更强大的State Control：支持在同一屏幕上具有不同的状态。例如，“查看我的帐户”可以允许对字段进行就地编辑，并且应出现“保存”，“取消”导航栏按钮。

Usage 用法

~~1 在index.js中，定义router，跟他的子节点route

  • 如果你的部分screens有公共属性，请定义schema，来减少重复

2 在任何screen中

  • import {Actions} from ‘react-native-router-flux’
  • Actions.ACTION_NAME(PARAMS) 将被适当的调用，并将action跟params传递给route
    ~~

使用scene取代了route

1
2
3
4
5
6
7
8
9
10
11
12
13
import {Scene, Router} from 'react-native-router-flux';

class App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      </Scene>
    </Router>
  }
}
  • Actions.ACTION_NAME(PARAMS): 将调用相应的动作和参数传递给场景
  • Actions.pop(): pop出当前scene. It accepts following optional params:
    • {popNum: [number]}：allows to pop multiple screens at once 一次弹出多个scene
    • {refresh: {...propsToSetOnPreviousScene}}：allows to refresh the props of the scene that it pops back to
  • Actions.refresh(PARAMS): will update the properties of the current screen. 更新当前scene的属性

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里面定义的属性

Redux

react-native-router-flux已经实现了redex，因为state一改变，render就渲染，使用redux合并状态再渲染，减少渲染次数。

常见 segmentfault Redux 介绍