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;  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

3202
来自专栏技术小讲堂

ASP.NET AJAX(3)__UpdatePanel

今天也不知道写不写的完了,最近闲下来了,却感冒了,早上起来都不会说话了,不过幸亏咱不是靠嘴皮子过活了,哎~~~~窃喜吧 上一篇简单写到UpdatePanel的一...

3625
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件V2.0.0.6 修改了几个小bug,使用演示。

     由于项目里面还在使用vs2003,还没有使用新的分页控件,所以对新的分页控件的测试还很不到位,遗留了不少的bug,感谢网友试用提出宝贵意见。由于项目正...

2185
来自专栏Timhbw博客

iOS基础问答面试题连载(二)-附答案

2016-11-2120:41:52 发表评论 7℃热度 1.xcode5和xcode7区别? 2.pch文件原理? 3.UIApplication常见...

3549
来自专栏Youngxj

[软件]图片中隐藏你想藏的文件

1812
来自专栏iOS技术杂谈

NSNotificationCenter 通知的使用方法详解你要知道的KVC、KVO、Delegate、Notification都在这里

你要知道的KVC、KVO、Delegate、Notification都在这里 转载请注明出处 https://cloud.tencent.com/develop...

4996
来自专栏ShaoYL

UINavigationController

3756
来自专栏大内老A

ASP.NET:创建Linked ValidationSummary, 深入理解ASP.NET的Validation

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入,并通过Validation...

3258
来自专栏张戈的专栏

根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

自从中国联盟成员导航采用响应式布局之后,不少朋友反馈该页面在 IE8、IE7 浏览器会错排,经测试发现确实存在这个问题,但我一直也没去深究解决。这几天博客折腾得...

4398
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

9087

扫码关注云+社区

领取腾讯云代金券