react-native-router-flux
这是一个路由,可以用来做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值}
就可以了 如上 给予响应图片:

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


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

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

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

当然还可以传值 这里就先到这里了 后面呢会慢慢的完善
它还是还有许多非常好用的属性:
RouterSceneModalTabBargetInitialStateReducerDefaultRendererSwitchActionsActionConstNavBar
在这里再加上一个可以回到手机界面的一个事件,因为router 它没有默认退出事件
所以我们要导入一个 BackHandler 这样的控件 ,事件给它返回一个结束App进程的触发 BackHandler.exitApp();
再cdm里面使用,就是这个事件一直存在,代码如下:
BackHandler.addEventListener('hardwareBackPress',this.onBackAndroid);
记得给它一个bnd
react-native-router-flux的更多相关文章
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- iOS、swift、React Native学习常用的社区、论坛
<!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...
- React Native 开发豆瓣评分(三)集成 Redux
什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- React Native填坑之旅--Navigation篇
React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- React Native实践之携程Moles框架
编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...
- 初始React Native
1.何是React Native: React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开 ...
随机推荐
- Web 前端编程运维必备
Html 1.Html 标签初知 2.Html 标签种类 3.Html 符号 4.Html Title 标签 5.Html meta 标签 6.Html Link 标签 7.Html p 标签 8.H ...
- 如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在 其他 状态下 为 block?
分成两种情况来说明: 如果是在 shell 即: gnome-termial终端中, 来启动或 使用 vim的话, 你是 无法 实现这种需求的: 改变vim中的光标形状 : 在插入状态下显示为 bea ...
- 容器中的诊断与分析3——live diagnosis——lldb
windows下,我们对于.net程序发生Crash,资源泄露,死锁等问题的分析,有神器windbg .net core程序运行在linux上时,该怎么进行对对Core Dump文件进行分析呢?今天介 ...
- Python三大神器:装饰器,迭代器,生成器
一.装饰器 由于一个函数能实现一种功能,现在想要在不改变其代码的情况下,让这个函数进化一下,即能保持原来的功能,还能有新的"技能",怎么办? 现已经存在一个自定义的函数func1, ...
- 小程序使用阿里巴巴TTF字体文件以及图标
转话地址https://transfonter.org 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索 ...
- HTML5外包团队 更新一下2019最新案例
本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企鹅号 372900288 祝大家 ...
- Yaml语法使用
YAML概要 1. 认识 YAML YAML是一个类似 XML.JSON 的标记性语言.YAML 强调以数据为中心,并不是以标识语言为重点.因而 YAML 本身的定义比较简单,号称“一种人性化的数据格 ...
- 蚂蚁金服mPaaS 3.0发布 助力客户智能化构建超级App生态
1月4日,蚂蚁金融科技宣布蚂蚁金服移动开发平台mPaaS(mobile Platform-as-a-Service)升级到3.0版本,“新版本以智能技术助力客户构建自己的超级 App,企业可以拥有等同 ...
- IDEA Maven项目的Mybatis逆向工程
IDEA Maven项目的Mybatis逆向工程 1.配置.pom 如果是在多模块开发下,该文件逆向工程要生成的那个模块下的pom文件. <build> <plugins> & ...
- Spark操作dataFrame进行写入mysql,自定义sql的方式
业务场景: 现在项目中需要通过对spark对原始数据进行计算,然后将计算结果写入到mysql中,但是在写入的时候有个限制: 1.mysql中的目标表事先已经存在,并且当中存在主键,自增长的键id 2. ...