简单！轻松使用react-navigation导航

当我本身在使用react-navigation时，我遇到一些问题，譬如如何使用它提供的抽屉视图？ 抽屉视图中，每个列表前面的图标又该如何设置？再如怎么结合tabNavigator和drawerNavigator？

在这篇文章中，我给你们介绍下如何使用react-navigation中的，stackNavigator,switchNavigaotr,Drawernavigator,以及Tab Navigator，他们是怎么样结合在一块儿工做的。

先给你们看看最终的效果图，而后咱们再来一步一步实现。话很少说，Let's dive in.

效果就是如gif图所示，包含最基本的底部导航，正常的页面间导航，还有抽屉视图；在这个图里没有展现switchNavigator，这是用来切换根视图的，很简单，后面会讲到。一个一个来

若是你直接想看项目代码，这是传送门：

项目地址：传送门

堆栈视图,stacknavigator

import {createStackNavigator} from 'react-navigation';
import HomeDetailView from '../../views/home/HomeDetailView'
import HomeView from '../../views/home/HomeView'
复制代码

引入全部你想放在主页堆栈视图的页面，注意路径是否正确

而后实现这个函数，建立HomeViewStack,在博文里我只放入了核心代码，具体项目中，我作了一些抽离，方便理解

createStackNavigator({
        HomeView: HomeView,
        HomeDetailView: HomeDetailView
    })
复制代码

再建立DiscoverViewStack,MoreViewStack

抽屉视图，Drawer Navigator

createDrawerNavigator(
        {
            更多: {
                screen: MoreViewStack,
                navigationOptions: () => ({
                    drawerLabel: '更多',
                    drawerIcon: ({ tintColor }) => (
                        <Ionicons name={'ios-chatbubbles'} size={20} color={tintColor} />
                    )

                }),
            },
            关于: {
                screen: AboutView,
                navigationOptions: {
                    drawerLabel: '关于',
                    drawerIcon: ({ tintColor }) => (
                        <Ionicons name={'ios-navigate'} size={20} color={tintColor} />
                    )


                }
            },
        },
        {
            contentComponent: CustomDrawerComponent,
            drawerWidth: 300,
            contentOptions: {
                activeTintColor: '#6F18F0'
            },

        }
    )
复制代码

这里，我直接将MoreViewStack 放入了抽屉视图，接着往下看，我会将stackNavigaotr，DrawerNavigator,tabNavigator结合一块儿使用

底部导航,Tab Navigator

咱们来看如何实现底部导航，tab navigator

import { createBottomTabNavigator } from 'react-navigation';
复制代码

而后实现这个叫作createBottomTabNavigator的函数

createBottomTabNavigator(
        {
            主页: HomeViewStack,
            发现: DiscoverViewStack,
            更多: DrawerNavigator
        },

        {
             defaultNavigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                    const { routeName } = navigation.state;
                    let IconComponent = Ionicons;
                    let iconName;
                    if (routeName === '主页') {
                        iconName = `ios-navigate`;
                       return <IconComponent name={iconName} size={25} color={tintColor} />;
                    } else if (routeName === '发现') {
                        iconName = `ios-chatbubbles`;
                        return <IconComponent name={iconName} size={25} color={tintColor} />;
                    } else {
                        iconName = `ios-more`;
                        return <IconComponent name={iconName} size={25} color={tintColor} />;
                    }

                },
            }),
            tabBarOptions: {
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray',
            },
            initialRouteName: "主页"

        },
    )
复制代码

核心代码，就是这样了。总体思路以下

完整的项目，我放在gayhub上，那里有详尽的代码，这篇博文提供了大体的思路，并无很是详细的描述实现细节。若是看了项目代码还有不清楚的，请在gayhub上留言.

项目地址：传送门

有什么不对的地方，也请你们指正，共同进步