React Native之使用導航器跳轉頁面（react-navigation）

　　react-navigation是一個導航庫，要使用react-navigation來實現跳轉頁面，首先得在項目中安裝此庫，由於Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。

　　所以這里使用Yarn來安裝react-navigation。至於Yarn的安裝，詳情見 React Native官網

　　安裝命令： yarn add react-navigation 

　　react-navigation 主要包括三個組件：

• StackNavigator 導航組件
• TabNavigator 切換組件
• DrawerNavigator 抽屜組件（沒使用成功，所以不做介紹）

　　StackNavigator 用於實現各個頁面之間的跳轉， TabNavigator 用來實現同一個頁面上不同界面的切換， DrawerNavigator 可以實現側滑的抽屜效果。

　　StackNavigator組件有兩個參數，使用方法為：StackNavigator(RouteConfigs, StackNavigatorConfig)

　　其中RouteConfigs 參數表示各個頁面路由配置，它是讓導航器知道需要導航的路由對應的頁面。

　　StackNavigatorConfig 參數表示導航器的配置，包括導航器的初始頁面、各個頁面之間導航的動畫、頁面的配置選項等等。

　　

　　TabNavigator ，即是Tab選項卡。該組件也接受兩個參數，用法：TabNavigator(RouteConfigs, TabNavigatorConfig)

　　其中RouteConfigs路由配置和 StackNavigator 中是一樣的，配置路由以及對應的 screen 頁面， navigationOptions 為對應路由頁面的配置選項。

　　TabNavigatorConfig表示選項卡的配置，包括初始顯示的Tab對應的頁面路由名稱，選項卡的位置，選項卡配置屬性等等。

　　

　　例如，實現一個頂部導航：

　　App.js代碼：

import React, {Component} from "react";
// StackNavigator用於實現各個頁面間的跳轉。TabNavigator切換組件，實現同一頁面上不同界面的切換。
import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation";
import HomeScreen from "./HomeScreen";  // 從HomeScreen頁面導入HomeScreen組件，HomeScreen其實是表示HomeScreen.js。./表示當前頁面，不可刪除
import NewsScreen from "./NewsScreen"; // 從NewsScreen頁面導入NewsScreen組件
import MyScreen from "./MyScreen"; // 從MyScreen頁面導入MyScreen組件
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}
const TabRouteConfigs = {  // 表示各個頁面路由配置,讓導航器知道需要導航的路由對應的頁面
    Home: {  // 路由名稱
        screen: HomeScreen,  // 對應的路由頁面
        navigationOptions: ({navigation}) => ({
            // tabBarLabel: '首頁',
            title: '首頁',
        }),
    },
    News: {
        screen: NewsScreen,
        navigationOptions: {  // 指定路由頁面的配置選項
            // tabBarLabel: '新聞',   // 表示tab的標題
            title: '新聞',  // 可用作頭部標題 headerTitle ，或者Tab標題 tabBarLabel
        },
    }
    ,
    My: {
        screen: MyScreen,
        navigationOptions: {
            // tabBarLabel: '我的',
            title: '我的',
        },
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',  // 初始顯示的Tab對應的頁面路由名稱
    tabBarComponent: TabBarTop, // Tab選項卡組件，有 TabBarBottom 和 TabBarTop 兩個值，在iOS中默認為 TabBarBottom ，在Android中默認為 TabBarTop 。
    tabBarPosition: 'top', // 設置選項卡的位置，在頂部或是底部，有'top'與'bottom'可選
    lazy: true,  // 是否懶加載頁面
    tabBarOptions: {} // 在屬性TabBarBottom與TabBarTop中有所不同
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
const StackNavigatorConfigs = {  // 表示導航器的配置，包括導航器的初始頁面、各個頁面之間導航的動畫、頁面的配置選項等等
    initialRouteName: 'Tab',
    navigationOptions: {
        title: 'Welcome to learn React Native!',
        headerStyle: {backgroundColor: '#5da8ff'},  // 設置導航頭部樣式
        headerTitleStyle: {color: '#333333'},  // 設置導航頭部標題樣式
    }
};
// StackNavigator 導航組件，用來實現各個界面跳轉
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

 

　　HomeScreen.js代碼：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class HomeScreen extends Component {
    render() {
        return (
            <Text>HomeScreen</Text>
        )
    }
}

 

　　NewsScreen.js代碼：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class NewsScreen extends Component {
    render() {
        return (
            <Text>NewsScreen</Text>
        )
    }
}

 

　　MyScreen.js代碼：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class MyScreen extends Component {
    render() {
        return (
            <Text>MyScreen</Text>
        )
    }
}

 

　　效果圖如下：

　　　　　　　　　　

 

　　如果想將導航放下面，只需要將tabBarPosition中的top改為bottom即可，效果如下：