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;