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;
最新文章
- Android---观察者模式的简单实现demo
- 自己实现简单的AOP(一)简介
- 【转】Visual Studio 非常实用的调试技巧
- 专注于HTTP的高性能高易用性网络库:Fslib.network库
- Sublime 学习记录(三) Emmet 插件
- ECG信号读出,检测QRS,P,T 波(小波去噪,并根据检测),基于BP辨识的神经网络
- redis安装及生产采用的启动方式和常用连接客户端
- linux 值安装yum包
- POJ 1815 Friendship (Dinic)
- etcd和redis的比较和日常使用场景
- int和Integer有什么区别?
- React-JSX简介
- POJ 1661 (Help Jimmy )
- 关于make: *** No rule to make target `clean&#39;. Stop.这个莫名其妙问题的解决方法
- CSS中的偏僻知识点
- XE6入门(二)项目中的文件
- 阅读笔记:A Few useful things to Know About machine Learning
- oracle常用cmd命令
- 快速傅里叶变换FFT / NTT
- 符合mvc思维的分页思想
热门文章
- OpenGL鼠标拖拽
- IIS&;ASP.NET 站点IP跳转到域名
- 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 使用原型链和EventTrigger
- 机器学习技法:14 Radial Basis Function Network
- rmdir&;rm
- Lintcode388 Permutation Sequence solution 题解
- 网络安全实验室_注入关writeup
- [AH/HNOI2017]抛硬币
- [HNOI2012]永无乡
- [BZOJ]2589: Spoj 10707 Count on a tree II