广州linux

当前位置:   网站首页 >> react native

react-native-router-flux用法

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

react-native最佳实践,推荐的解决方案,github地址

如何使用

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

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

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:

PropertyTypeDefaultDescription
headerobjectnulloptional header view
footerobjectnulloptional footer view (e.g. tab bar)
hideNavBarboolfalsehides navigation bar for every route

Route:

PropertyTypeDefaultDescription
namestringrequired必须是唯一的,将在screen转场时调用.比如a场景name=’ima’,在b场景要跳转到a,就在b场景onPress事件调用Action.ima(传参),ps使用redux实现了统一管理state状态
componentReact.Componentsemi-required要显示在screen的主角,也可以嵌套router
typestringoptional定义新screen如何被添加到navigation栈。有以下push,modal,actionSheet,replaceswitchreset模式。默认是’push’。replacenavigator用新route来replace 当前route. actionSheet 弹出 Action Sheet弹窗, 必须穿回掉函数做参数, 可以看一下demon学习. modal 在当前组件中,插入新组件. 用作在转场之前 (比如登录进程)弹出的提示框,屏蔽了下层的触摸操作。switch 跟tabbar的screen配合使用. reset 用法接近replace,除了他要从navigatior stack中卸载. modal 组件用Actions.dismiss()来取消
initialboolfalse设置true 本screen 为初始页
titlestringnull在navigation bar中显示的标题
schemastringoptional预先在schema定义的属性
wrapRouterboolfalseIf 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是有用的。
sceneConfigNavigator.SceneConfigsoptional定义转场动画类型
defaultRoutestringoptional定义要跳转到哪个route,当本route作为tab被选中并点击的时候
hideNavBarboolfalse隐藏本route的navigation bar
hideTabBarboolfalse隐藏本route的tabBar (当父router创建了tabbar并使用了, check Example)
navigationBarStyleView style
继承自navigation bar 可选的style
titleStyleText style
optional style override for the title element
renderTitleClosure
optional closure to render the title element
barButtonIconStyleImage style
继承自icon button可选的style (e.g. back icon)
leftTitlestring
可选的,显示在left的文本(上一个roue没有提供renderBackButton prop时使用)renderBackButton > leftTitle > previous route's title
renderLeftButtonClosure
optional closure to render the left title / buttons element
renderBackButtonClosure
optional closure to render back text or button if this route happens to be the previous route
leftButtonStyleView style
optional style override for the container of left title / buttons
leftButtonTextStyleText style
optional style override for the left title element
rightTitlestring
optional string to display on the right. onRight must be provided for this to appear.
renderRightButtonClosure
optional closure to render the right title / buttons element
rightButtonStyleView style
optional style override for the container of right title / buttons
rightButtonTextStyleText style
optional style override for the right title element

Schema:

PropertyTypeDefaultDescription
namestringrequiredThe name of the schema, to be referenced in the route as schema={"name"}
property--Schema can have any property that you want the Route to inherit 可以定义任何你想在route里面定义的属性

Redux

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

发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项