官方推荐react-navigation的使用

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

一、主要构成

按使用形式主要分三部分:
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 (
            <View style={styles.container}>
                <Text style={{padding:10}}>Hello, Navigation!</Text>
                <Button
                    onPress={() => navigate('Chat',{user:'Sybil'})}
                    title="点击跳转"/>
            </View>
        )
    }
}
const MainScreenNavigator = TabNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            tabBar: {
                label: '首页',
                icon: ({tintColor}) => (
                    <Image
                        source={require('./image/bar_home_nomarl@3x.png')}
                        style={[{tintColor: tintColor},styles.icon]}
                    />
                ),
            },
        }
    },
    Certificate: {
        screen: MinePage,
        navigationOptions: {
            tabBar: {
                label: '我的',
                icon: ({tintColor}) => (
                    <Image
                        source={require('./image/bar_center_normal@3x.png')}
                        style={[{tintColor: tintColor},styles.icon]}
                    />
                ),
            },
        }
    },
}, {
    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 (
        <View style={{backgroundColor:'#fff',flex:1}}>
            <Text style={{padding:20}}>Chat with {params.user}</Text>

        </View>

        );
    }
}
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 }) => (
         <Image
             source={require('./image/chat@3x.png')}
            style={[styles.icon, {tintColor: tintColor}]}
         />
      ),
   };
    render(){;
        return(
            <View style={{backgroundColor:'#fff',flex:1}}>
                <Text style={{padding:20}}>Sybil</Text>
                <Button
                  style={{padding:20}}
                  onPress={() => this.props.navigation.navigate('DrawerOpen')}
                  title="点击打开侧滑菜单"
                />
            </View>
        );
    }
}

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 }) => (
            <Image
                source={require('./image/notif@3x.png')}
                style={[styles.tabIcon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
             <View style={{backgroundColor:'#fff'}}>
                <Button
                    style={{padding:20}}
                    onPress={() => this.props.navigation.navigate('DrawerOpen')}
                    title="点击打开侧滑菜单"
                />
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="返回我的界面"
                />
            </View>
        );
    }
}

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修改了！

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

QQ20170427-155140.gif

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