本文共 5485 字，大约阅读时间需要 18 分钟。

看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。

http://www.bijishequ.com/detail/381477

一、主要构成

按使用形式主要分三部分:
1 StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
2 TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏
3 DrawerNavigator: 抽屉效果，侧边滑出

二、使用

1.新建项目

react-native init ComponentDemo

2. 在应用中安装此库

npm install --save react-navigation
安装完发现是beta版本(v1.0.0-beta.7) ，竟然有坑?！一会儿我们会详细说这个坑~

3.测试TabNavigator、StackNavigator和DrawerNavigator

（1）新建HomePage.js

import React from 'react';import {    StyleSheet,    View,    Text,    Button,    Image} from 'react-native';import {    StackNavigator,    TabNavigator} from 'react-navigation';import ChatScreen from './ChatScreen';import MinePage from './MinePage';class HomePage extends React.Component{    static navigationOptions={        title: '首页',//设置标题内容        header:{            backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）        }    }    constructor(props) {        super(props);    }    render() {        const {navigate} = this.props.navigation;        return (            
                   
    
     Hello, Navigation!
                    
     navigate('Chat',{user:'Sybil'})}                    title="点击跳转"/>                    )    }}const MainScreenNavigator = TabNavigator({    Home: {        screen: HomePage,        navigationOptions: {            tabBar: {                label: '首页',                icon: ({tintColor}) => (                                    ),            },        }    },    Certificate: {        screen: MinePage,        navigationOptions: {            tabBar: {                label: '我的',                icon: ({tintColor}) => (                                    ),            },        }    },}, {    animationEnabled: false, // 切换页面时不显示动画    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的    swipeEnabled: false, // 禁止左右滑动    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转    tabBarOptions: {        activeTintColor: '#008AC9', // 文字和图片选中颜色        inactiveTintColor: '#999', // 文字和图片默认颜色        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了        style: {            backgroundColor: '#fff', // TabBar 背景色        },        labelStyle: {            fontSize: 12, // 文字大小        },    },});const styles = StyleSheet.create({    container:{        flex: 1,        backgroundColor:'#fff'    },    icon: {        height: 22,        width: 22,        resizeMode: 'contain'    }});const SimpleApp = StackNavigator({    Home: {screen: MainScreenNavigator},    Chat:{screen:ChatScreen},});export default SimpleApp;
   

（2）新建ChatScreen.js

import React from 'react';import {    Button,    Image,    View,    Text} from 'react-native';class ChatScreen extends React.Component {    static navigationOptions = {        title:'聊天',    };    render() {        const {params} = this.props.navigation.state;        return (        
               
    
     Chat with {params.user}
            
           );    }}export default ChatScreen;

（3）新建MinePage.js

import React,{Component} from 'react';import {    Button,    Image,    View,    Text,    StyleSheet} from 'react-native';import {   DrawerNavigator} from 'react-navigation';import MyNotificationsScreen from './MyNotificationsScreen';class MinePage extends Component{    static navigationOptions = {          title:'我的',         drawerLabel: '我的',        // Note: By default the icon is only shown on iOS. Search the  showIcon option below.         drawerIcon: ({ tintColor }) => (               ),   };    render(){;        return(            
                   
    
     Sybil
                    
     this.props.navigation.navigate('DrawerOpen')}                  title="点击打开侧滑菜单"                />                    );    }}const styles = StyleSheet.create({    icon: {        width: 24,        height: 24,    },});const MyChatNavigator = DrawerNavigator({    MyChat: {        screen: MinePage,    },    Notifications: {        screen: MyNotificationsScreen,    },},{    drawerWidth: 220, // 抽屉宽    drawerPosition: 'left', // 抽屉在左边还是右边    // contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件    contentOptions: {        initialRouteName: MinePage, // 默认页面组件        activeTintColor: '#008AC9',  // 选中文字颜色        activeBackgroundColor: '#f5f5f5', // 选中背景颜色        inactiveTintColor: '#000',  // 未选中文字颜色        inactiveBackgroundColor: '#fff', // 未选中背景颜色        style: {  // 样式        }    }});export default MyChatNavigator;
   

（4）编写MyNotificationsScreen.js

import React from 'react';import {    StyleSheet,    View,    Text,    Button,    Image} from 'react-native';class MyNotificationsScreen extends React.Component {    static navigationOptions = {        title:'通知',        drawerLabel: '通知',        drawerIcon: ({ tintColor }) => (                    ),    };    render() {        return (             
                   
     this.props.navigation.navigate('DrawerOpen')}                    title="点击打开侧滑菜单"                />                
     this.props.navigation.goBack()}                    title="返回我的界面"                />                    );    }}const styles = StyleSheet.create({    tabIcon: {        width: 24,        height: 24,    },});export default MyNotificationsScreen;
   

（5）运行
报错啦？这就是上面我们所说的坑~
什么原因呢？原来是测试版的bug，在目录中找到node_modules/react-navigation/src/views/Header.js的第12行，删除它就OK了~

Ps：遗憾的是这个错误我没有留图啊~在我即将发表这篇文章的时候，最新版已经变为(v1.0.0-beta.9)了，最新版已经将上述的bug修改了！

好了，再次运行~
上一个动态效果图：

 

想详细了解React Navigation，可以阅读这一篇英文的，希望对你们有所帮助~

转载地址：http://awrni.baihongyu.com/