React-navigation使用攻略

源碼在此 僅供參考

一、簡介

根據React Navigation官網文檔描述：Learn once, navigate anywhere.

React Navigation的誕生，源于React Native社區(qū)對基于Javascript的可擴展且使用簡單的導航解決方案的需求。
React Navigation是Facebook，Expo和React社區(qū)的開發(fā)者們合作的結果：它取代并改進了React Native生態(tài)系統(tǒng)中的多個導航庫，其中包括Ex-Navigation，React Native的Navigator和NavigationExperimental組件。

內置導航器

react-navigation包含以下功能來幫助你創(chuàng)建導航器:

  • StackNavigator - 一次只渲染一個頁面，并提供頁面之間跳轉的方法。 當打開一個新的頁面時，它被放置在堆棧的頂部
  • TabNavigator - 渲染一個選項卡，讓用戶可以在幾個頁面之間切換
  • DrawerNavigator - 提供一個從屏幕左側滑入的抽屜
使用導航頂層組件

導航器渲染的僅僅是React組件對應的應用頁面。
要了解如何創(chuàng)建頁面，請閱讀以下內容：

二、使用

上面介紹了很多，你可以點進去看StackNavigator、TabNavigator等它們的內容屬性，屬性有點多，這里就不累贅羅列了，具體可以參考這篇文章：react-navigation使用技巧 寫得很好~

直接上效果：


效果圖

使用步驟如下：

  1. 導入依賴庫

在項目Terminal中輸入命令行：

npm install react-navigation --save

然后在package.json文件中就可以看到，依賴庫已經導入完畢：

"react-native-tab-navigator": "^0.3.4",

接下來就可以愉快地使用react-navigation來進行頁面導航了。

  1. 配置Navigator
  • 在項目的入口中直接配置StackNavigator，StackNavigator中注冊所有需要跳轉的界面，在這個項目中還有注冊登錄功能，在效果圖中沒有展示，這里不作探討。首先是入口文件：
import React from 'react';
import {StackNavigator} from 'react-navigation';
import {TabNav} from "./RootPage";
import LoginPage from "./page/Login/loginPage";
import RegPage from "./page/Login/regPage";
import {FindAccountPage} from "./page/Login/findAccountPage"; // 路由導航

const App = StackNavigator({
        Login: {screen: LoginPage}, // 登錄頁
        Reg: {screen: RegPage}, // 注冊頁
        FindAccount: {screen: FindAccountPage}, // 找回密碼頁
        Main: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
                header: null
            })
        }
    },
    {
        initialRouteName: 'Login',
        headerMode: 'screen'
    });

export default App;

上面可以注意到TabNav，也就是TabNavigator，是作為一個screen參數的值傳入到StackNavigator中，在上面提到的navigationOptions的配置中，我們將header設置為null，也就是不要標題欄。

  • 接著進入到配置TabNavigator的RootPage中：
import React from 'react';
import {TabNavigator} from 'react-navigation';

import HomePage from './page/Home/HomePage';
import FriendPage from './page/Friend/FriendPage';
import TaskPage from './page/Task/TaskPage';
import MinePage from './page/Mine/MinePage';
import DealPage from './page/Deal/DealPage';

export const TabNav = TabNavigator(
    {
        Home: {
            screen: HomePage,
        },
        Task: {
            screen: TaskPage,
        },
        Friend: {
            screen: FriendPage,
        },
        Deal: {
            screen: DealPage,
        },
        Mine: {
            screen: MinePage,
        }
    },
    {
        tabBarOptions: {
            //當前選中的tab bar的文本顏色和圖標顏色
            activeTintColor: '#4BC1D2',
            //當前未選中的tab bar的文本顏色和圖標顏色
            inactiveTintColor: '#000',
            //是否顯示tab bar的圖標，默認是false
            showIcon: true,
            //showLabel - 是否顯示tab bar的文本，默認是true
            showLabel: true,
            //是否將文本轉換為大小，默認是true
            upperCaseLabel: false,
            //material design中的波紋顏色(僅支持Android >= 5.0)
            pressColor: '#788493',
            //按下tab bar時的不透明度(僅支持iOS和Android < 5.0).
            pressOpacity: 0.8,
            //tab bar的樣式
            style: {
                backgroundColor: '#fff',
                paddingBottom: 1,
                borderTopWidth: 0.2,
                paddingTop:1,
                borderTopColor: '#ccc',
            },
            //tab bar的文本樣式
            labelStyle: {
                fontSize: 11,
                margin: 1
            },
            //tab 頁指示符的樣式 (tab頁下面的一條線).
            indicatorStyle: {height: 0},
        },
        //tab bar的位置, 可選值： 'top' or 'bottom'
        tabBarPosition: 'bottom',
        //是否允許滑動切換tab頁
        swipeEnabled: true,
        //是否在切換tab頁時使用動畫
        animationEnabled: false,
        //是否懶加載
        lazy: true,
        //返回按鈕是否會導致tab切換到初始tab頁？ 如果是，則設置為initialRoute，否則為none。 缺省為initialRoute。
        backBehavior: 'none',
    });

在這里我們可以看到，我們將底部導航的屬性基本都用上了，這是為了方便大家在使用時作適合自己的選擇，畢竟需求不一樣，不過這個效果是可以接受的了~

  • 在這個界面中導入了其他五個子界面，每個子界面效果可以設置成差不多，例如下面這樣：
import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';

export default class FriendPage extends Component {
    static navigationOptions = {
        tabBarLabel: '好友',
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../../img/fri_sel.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../../img/fri_nor.png')}/>
            );
        },
    };

    render() {
        return (
            <View style={styles.container}>
                <Text>這是好友</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});

在子界面中可以設置icon圖標樣式，表示在點擊前后顏色的改變，效果如下：


點擊當前界面
點擊下個界面
首頁

當然，我們也可以設置標題欄，只需要在下面代碼中添加headerTitle屬性：

export default class FriendPage extends Component {
    static navigationOptions = {
        tabBarLabel: '好友',
        headerTitle: '好友',
        tabBarIcon: ({focused}) => { ...

別忘了，在StackNavigator配置TabNavigator時不要設置header為null即可。

Main: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
             // header: null
            })
        }

關于DrawerNavigator，用到的情況比較少，就不展開說了，可以參考下面這個Demo 傳送門

三、總結 & 題外話

總的來說，react-navigation這個庫并不復雜，關鍵在于你需要將它封裝成為符合自己項目需求的框架樣式，后續(xù)的功能才能依次往里添加和實現。有些坑還是需要自己踩的，不過踩的坑基本都忘記了，可能痛苦的經理人總是本能想著忘記吧，哈哈又扯遠了，剛開始學RN，求大神們別嘲諷哈，不過認真完成一件事情，的確有很高的成就感呢~繼續(xù)加油！

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容