这是一个路由,可以用来做Android底部的导航栏,学Android的都知道,如果用原生的代码来

做导航栏,会很复杂,关系到很多复杂的知识。

接下来我就简单的说明一下如何插入和使用吧:

1.你要先依赖它:npm install react-native-router-flux -save /或者 yarn add react-native-router-flux (安装过 yarn 的)

2.根据需求,先做几个界面,有个定为首页,有你的导航栏在下面

3.用一个let 的箭头函数来接收那几个界面

在app,js作为路由转换的界面 给个组件变量接收界面如

let aaa =()=>{return <你的界面>}

导入依赖该包的两个组件 import {Router,Scene} from 'react-native-router-flux';

将原先得 return <View></View>修改为 返回一个Router 在<Router>的里面添加<Scene>组件

在再里面添加对应几个界面就几个<Scene> 给它个key(用单引号括起来) 用来识别跳转到哪个界面 而对应的界面要用属性component={在上面定义的组件变量名} 给它

一个默认呈现的界面 initial={true}

在首页的导航栏下的每个字段给个点击事件onPress

在这里之前要先依赖 一个Actions 的组件 import {Actions} from 'react-native-router-flux';

在事件里为{Actions.对应的key值}

就可以了 如上 给予响应图片:

====================================================

==================================================================================================

=================================================================================================

========================================================================================================

当然还可以传值 这里就先到这里了 后面呢会慢慢的完善

它还是还有许多非常好用的属性:

  • Router Scene Modal TabBar getInitialState Reducer DefaultRenderer Switch Actions ActionConst NavBar

在这里再加上一个可以回到手机界面的一个事件,因为router 它没有默认退出事件

所以我们要导入一个  BackHandler 这样的控件 ,事件给它返回一个结束App进程的触发   BackHandler.exitApp();

再cdm里面使用,就是这个事件一直存在,代码如下:

BackHandler.addEventListener('hardwareBackPress',this.onBackAndroid);
记得给它一个bnd

react-native-router-flux的更多相关文章

  1. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  2. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  3. React Native 开发豆瓣评分(三)集成 Redux

    什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...

  4. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  5. react native 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...

  6. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  7. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  8. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  9. React Native实践之携程Moles框架

    编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...

  10. 初始React Native

    1.何是React Native: React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开 ...

随机推荐

  1. mybatis的collection查询问题以及使用原生解决方案的结果

    之前在springboot+mybatis环境的坑和sql语句简化技巧的第2点提到,数据库的一对多查询可以一次查询多级数据,并且把拿到的数据按id聚合,使父级表和子级表都有数据. 但是这种查询,必然要 ...

  2. Bugku-CTF之Trim的日记本(不要一次就放弃)

    Day19 Trim的日记本 http://123.206.87.240:9002/ hints:不要一次就放弃

  3. 2018年—2019年第二学期第四周C#学习个人总结

    第五章面向对象高级包括:5.1类的继承中有5.1.1继承的概念:一是在现实生活中,继承一般指的是子女继承父辈的财产;在C#,类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类被称作子类, ...

  4. HBase Filter及对应Shell

    比较运算符 CompareFilter.CompareOp比较运算符用于定义比较关系,可以有以下几类值供选择: EQUAL 相等 GREATER 大于 GREATER_OR_EQUAL 大于等于 LE ...

  5. code回顾

    Linq return Content("<script>alert('你想说的话');javascript:history.go(-1);</script>&quo ...

  6. 机器学习实战(笔记)------------KNN算法

    1.KNN算法 KNN算法即K-临近算法,采用测量不同特征值之间的距离的方法进行分类. 以二维情况举例:         假设一条样本含有两个特征.将这两种特征进行数值化,我们就可以假设这两种特种分别 ...

  7. Spring循环依赖问题

    什么是循环依赖? 循环依赖就是循环引用,指两个或多个bean互相持有对方,比如说TestA引用TestB.TestB引用TestA,最终形成一个闭环. 注意:循环依赖不是指循环调用. 循环调用:指方法 ...

  8. ArcGIS Pro开发Web3D应用(1)——环境搭建与初始实例

    1.搭建环境 1.1 ArcGIS Web3D软件环境 ArcGIS Pro 2.0(必须) ArcGIS for Enterprise 10.5.1 (从10.5开始称呼为Enterprise)包括 ...

  9. Itext生成pdf文件

    来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...

  10. mybatis 一对一关联 association 返回空值

    mybatis 一对一关联 association 返回空值 最近学习spring mvc + mybatis开发,看的书是<Spring MVC+Mybatis开发 从入门到精通>,在学 ...