簡單！輕鬆使用react-navigation導航

時間 2019-12-07

標籤簡單輕鬆使用 react navigation 導航欄目 React 简体版

原文原文鏈接

當我本身在使用react-navigation時，我遇到一些問題，譬如如何使用它提供的抽屜視圖？抽屜視圖中，每個列表前面的圖標又該如何設置？再如怎麼結合tabNavigator和drawerNavigator？react

在這篇文章中，我給你們介紹下如何使用react-navigation中的，stackNavigator,switchNavigaotr,Drawernavigator,以及Tab Navigator，他們是怎麼樣結合在一塊兒工做的。ios

先給你們看看最終的效果圖，而後咱們再來一步一步實現。話很少說，Let's dive in.git

效果就是如gif圖所示，包含最基本的底部導航，正常的頁面間導航，還有抽屜視圖；在這個圖裏沒有展現switchNavigator，這是用來切換根視圖的，很簡單，後面會講到。一個一個來github

若是你直接想看項目代碼，這是傳送門：bash

項目地址：傳送門函數

堆棧視圖,stacknavigator

import {createStackNavigator} from 'react-navigation';
import HomeDetailView from '../../views/home/HomeDetailView'
import HomeView from '../../views/home/HomeView'
複製代碼

引入全部你想放在主頁堆棧視圖的頁面，注意路徑是否正確ui

而後實現這個函數，建立HomeViewStack,在博文裏我只放入了核心代碼，具體項目中，我作了一些抽離，方便理解spa

createStackNavigator({
        HomeView: HomeView,
        HomeDetailView: HomeDetailView
    })
複製代碼

再建立DiscoverViewStack,MoreViewStackcode

抽屜視圖，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結合一塊兒使用cdn

底部導航,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: "主頁"

        },
    )
複製代碼