React Native 学习笔记二十一(导航器三方 插件学习)

所有的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: 

PropertyTypeDefaultDescriptionheaderobjectnulloptional header viewfooterobjectnulloptional footer view (e.g. tab bar)hideNavBarboolfalsehides navigation bar for every route

Route: 

PropertyTypeDefaultDescriptionnamestringrequired必须是唯一的,将在screen转场时调用.比如a场景name=’ima’,在b场景要跳转到a，就在b场景onPress事件调用Action.ima(传参)，ps使用redux实现了统一管理state状态componentReact.Componentsemi-required要显示在screen的主角，也可以嵌套routertypestringoptional定义新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()来取消 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 barhideTabBarboolfalse隐藏本route的tabBar (当父router创建了tabbar并使用了, check Example)navigationBarStyleView style 继承自navigation bar 可选的styletitleStyleText style optional style override for the title elementrenderTitleClosure optional closure to render the title elementbarButtonIconStyleImage style 继承自icon button可选的style (e.g. back icon)leftTitlestring 可选的，显示在left的文本（上一个roue没有提供  renderBackButton prop时使用）  renderBackButton >  leftTitle >  previous route's titlerenderLeftButtonClosure optional closure to render the left title / buttons elementrenderBackButtonClosure optional closure to render back text or button if this route happens to be the previous routeleftButtonStyleView style optional style override for the container of left title / buttonsleftButtonTextStyleText style optional style override for the left title elementrightTitlestring optional string to display on the right.  onRight must be provided for this to appear. renderRightButtonClosure optional closure to render the right title / buttons elementrightButtonStyleView style optional style override for the container of right title / buttonsrightButtonTextStyleText style optional style override for the right title element

Schema: 

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