React Native自定义导航条
Navigator和NavigatorIOS
在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换。在React Native中RN为我们提供了两个组件:Navigator和NavigatorIOS。
关于Navigator的介绍请查看之前的介绍文章:http://blog.csdn.net/xiangzhihong8/article/details/52624367
在使用Navigator导航器的时候需要重点掌握Navigator的几个方法:
getCurrentRoutes() 该进行返回存在的路由列表信息
jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面
jumpForward() 进行跳转到相当于当前页面的下一个页面
jumpTo(route) 根据传入的一个路由信息,跳转到一个指定的页面(该页面不会卸载删除)
push(route) 导航切换到一个新的页面中,新的页面进行压入栈。通过jumpForward()方法可以回退过去
pop() 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前的页面
replace(route) 只用传入的路由的指定页面进行替换掉当前的页面
replaceAtIndex(route,index) 传入路由以及位置索引,使用该路由指定的页面跳转到指定位置的页面
replacePrevious(route) 传入路由,通过指定路由的页面替换掉前一个页面
resetTo(route) 进行导航到新的界面,并且重置整个路由栈
immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
popToRoute(route) 进行弹出相关页面,跳转到指定路由的页面,弹出来的页面会被卸载删除
popToTop() 进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
/>
Navigator.IOS
常用方法:
push(route)
导航器跳转到一个新的路由。
pop()
回到上一页。
popN(n)
回到N页之前。当N=1的时候,效果和 pop() 一样。
replace(route)
替换当前页的路由,并立即加载新路由的视图。
replacePrevious(route)
替换上一页的路由/视图。
replacePreviousAndPop(route)
替换上一页的路由/视图并且立刻切换回上一页。
resetTo(route)
替换最顶级的路由并且回到它。
popToRoute(route)
一直回到某个指定的路由。
popToTop()
回到最顶层的路由。
示例小程序
1,定义外部组件
<TabBarIOS.Item
icon={require('image!tabbar_home')}
title="首页"
selected={this.state.selectedItem == 'home'}
onPress={()=>{this.setState({selectedItem:'home'})}}
>
<NavigatorIOS
initialRoute ={ {
component: Home, //具体的板块
title:'网易新闻', //导航栏标题
}}
/>
</TabBarIOS.Item>
Main主页面代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
NavigatorIOS
} from 'react-native';
// 引入外部的组件(此处注意是相当于了项目根目录)
var Home = require('../Component/Home');
var Message = require('../Component/Message');
var Find = require('../Component/Find');
var Mine = require('../Component/Mine');
var Main = React.createClass({
// 初始化设置
getInitialState(){
return{
// 设置默认选中的tabBarItem标识
selectedItem:'home', // 默认让首页被选中
}
},
render() {
return (
<TabBarIOS
tintColor="orange"
>
{/*首页*/}
<TabBarIOS.Item
icon={require('image!tabbar_home')}
title="首页"
selected={this.state.selectedItem == 'home'}
onPress={()=>{this.setState({selectedItem:'home'})}}
>
<NavigatorIOS
initialRoute ={
{
component: Home, //具体的板块
title:'网易新闻', //导航栏标题
}
}
/>
</TabBarIOS.Item>
{/*消息*/}
<TabBarIOS.Item
icon={require('image!tabbar_message_center')}
title="消息"
selected={this.state.selectedItem == 'message'}
onPress={()=>{this.setState({selectedItem:'message'})}}
>
<NavigatorIOS
initialRoute ={
{
component: Message, //具体的板块
title:'消息', //导航栏标题
}
}
/>
</TabBarIOS.Item>
{/*发现*/}
<TabBarIOS.Item
icon={require('image!tabbar_discover')}
title="发现"
selected={this.state.selectedItem == 'find'}
onPress={()=>{this.setState({selectedItem:'find'})}}
>
<NavigatorIOS
initialRoute ={
{
component: Find, //具体的板块
title:'发现', //导航栏标题
}
}
/>
</TabBarIOS.Item>
{/*我的*/}
<TabBarIOS.Item
icon={require('image!tabbar_profile')}
title="我"
selected={this.state.selectedItem == 'mine'}
onPress={()=>{this.setState({selectedItem:'mine'})}}
>
<NavigatorIOS
initialRoute ={
{
component: Mine, //具体的板块
title:'我', //导航栏标题
}
}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
// 输出类
module.exports = Main;
React Native自定义导航条的更多相关文章
- [RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...
- React Native自定义导航栏
之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...
- iOS11自定义导航条上移处理
image.png 在自定义导航条时,通常会继承系统的UINavigationBar,但如上图,在iOS11上,导航条改动了.自定义导航条代码 -(MBNavigationBar *)myNavBar ...
- [RN] React Native 自定义 底部 弹出 选择框 实现
React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
- jQuery Mobile 自定义导航条图标
1.jQuery Mobile 自定义导航条图标
- React Native中自定义导航条
这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...
- React Native 之导航栏
一定要参考官网: https://reactnavigation.org/docs/en/getting-started.html 代码来自慕课网:https://www.imooc.com/cour ...
- iOS7新特性-完美解决iOS7关于自定义导航条UIBarButtonItem偏移的问题
前言: 本文由DevDiv社区@Vincent 原创,转载请注明出处! http://www.devdiv.com/iOS_iPhone-ios_ios_uibarbuttonitem_-thread ...
- 可自定义导航条功能案例ios项目源码
可定制的navigationitem ,当我们使用系统的方法设置navigationItem的leftItem或者rightItem时,我们会 发现item位置会有偏差(左边的偏右,右边的偏左).当设 ...
随机推荐
- C语言 时间函数的学习
一直都是以简单的time_t t,time(&t),ctime(&t)来表示时间,后来要以时间为日志文件的名字时,就有点蒙逼了.学习一下. tm结构: struct tm { int ...
- Temple Build~dp(01背包的变形)
The Dwarves of Middle Earth are renowned for their delving and smithy ability, but they are also mas ...
- github的简单使用
查了好多入门教程(图文并茂可以了解一些基本步骤),感觉逻辑欠缺,(很多东西跟着教程了解会用了,不了解逻辑,只是会了这一个,其他的还是很蒙),来一起理一理把 1.第一步下载并注册(这个自己解决) 2.用 ...
- [bzoj4868][Shoi2017]期末考试
来自FallDream 的博客,未经允许,请勿转载,谢谢. 有n位同学,每位同学都参加了全部的m门课程的期末考试,都在焦急的等待成绩的公布.第i位同学希望在第ti天或之前得知所.有.课程的成绩.如果在 ...
- c# txt文件的读取和写入
我们在工程实践中经常要处理传感器采集的数据,有时候要把这些数据记录下来,有时候也需要把记录下来的数据读取到项目中.接下来我们用C#演示如何对txt文件进行读写操作.我们要用到StreamReader ...
- git日常使用经验积累
1 git merge origin/develop 将远程分支合并到本地,一般先执行合并,解决冲突,然后再git commit合入新建的分支,推送到远程分支里面,最后码云上找pl pull requ ...
- 利用maven install jar到项目当中
接着上面利用maven打好的jar包.把刚刚打好的包放入其他项目当中怎么办? 只需要在相同的目录下执行mvn install,maven会自动把jar放到本地仓库中. 这样,原先maven项目中缺少依 ...
- Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的分析与比较 分区表位置
本文主要讲解Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的作用以及不同之处. 转自http://haohaozhang.blog.51cto.com/917 ...
- Server-U FTP与AD完美集成方案详解
最近咱有个任务,那就是把公司的文件服务器.FTP服务器.邮件服务器进行迁移并作相应的整合.登陆后台查看了,公司目前正在使用的方案.FTP服务器使用的是Server-u FTP,验证方式选择的windo ...
- 使用PHP脚本远程部署git项目
准备工作: 1.coding.net创建私有项目 2.安装了Web服务 Git服务的服务器 服务器端: 1.nginx.php-fpm统一用www用户 www 目录,这个可以通过修改配置文件实现. [ ...