react-navigation 使用教程(配完整項目)

時間  2019-12-05
標籤 react navigation 使用 教程 完整 項目 欄目 React 简体版
原文   原文鏈接

Fb在React Native當前最新版本0.44中將Navigator刪除。推薦使用react-navigation，據稱此庫有原生般的性能體驗效果。可能會成爲將來React Native導航組件的主流軍。react

本文主要介紹如何使用react-navigation構建導航欄與標籤欄git

這裏有個用React Native實現網易新聞客戶端的項目，裏面除了使用了react-navigation外，還包括其餘一些經常使用庫的使用，須要的能夠點擊傳送門>>>github

使用前須要瞭解下StackNavigator和TabNavigator的屬性bash

StackNavigator屬性介紹app

navigationOptions：配置StackNavigator的一些屬性。  
      
        title：標題，若是設置了這個導航欄和標籤欄的title就會變成同樣的，不推薦使用  
        header：能夠設置一些導航的屬性，若是隱藏頂部導航欄只要將這個屬性設置爲null  
        headerTitle：設置導航欄標題，推薦  
        headerBackTitle：設置跳轉頁面左側返回箭頭後面的文字，默認是上一個頁面的標題。能夠自定義，也能夠設置爲null  
        headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭後的文字時，默認改爲"返回"  
        headerRight：設置導航條右側。能夠是按鈕或者其餘視圖控件  
        headerLeft：設置導航條左側。能夠是按鈕或者其餘視圖控件  
        headerStyle：設置導航條的樣式。背景色，寬高等  
        headerTitleStyle：設置導航欄文字樣式  
        headerBackTitleStyle：設置導航欄‘返回’文字樣式  
        headerTintColor：設置導航欄顏色  
        headerPressColorAndroid：安卓獨有的設置顏色紋理，須要安卓版本大於5.0  
        gesturesEnabled：是否支持滑動返回手勢，iOS默認支持，安卓默認關閉  
       
      
    screen：對應界面名稱，須要填入import以後的頁面  
      
    mode：定義跳轉風格  
        card：使用iOS和安卓默認的風格  
        modal：iOS獨有的使屏幕從底部畫出。相似iOS的present效果  
      
    headerMode：返回上級頁面時動畫效果  
        float：iOS默認的效果  
        screen：滑動過程當中，整個頁面都會返回  
        none：無動畫  
      
    cardStyle：自定義設置跳轉效果  
        transitionConfig： 自定義設置滑動返回的配置  
        onTransitionStart：當轉換動畫即將開始時被調用的功能  
        onTransitionEnd：當轉換動畫完成，將被調用的功能  
      
    path：路由中設置的路徑的覆蓋映射配置  
      
    initialRouteName：設置默認的頁面組件，必須是上面已註冊的頁面組件  
      
    initialRouteParams：初始路由參數  
複製代碼

TabNavigator的屬性介紹ide

screen：和導航的功能是同樣的，對應界面名稱，能夠在其餘頁面經過這個screen傳值和跳轉。  
      
    navigationOptions：配置TabNavigator的一些屬性  
         title：標題，會同時設置導航條和標籤欄的title  
         tabBarVisible：是否隱藏標籤欄。默認不隱藏(true)  
         tabBarIcon：設置標籤欄的圖標。須要給每一個都設置  
         tabBarLabel：設置標籤欄的title。推薦  
      
    tabBarPosition：設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom'）  
         swipeEnabled：是否容許在標籤之間進行滑動  
         animationEnabled：是否在更改標籤時顯示動畫  
         lazy：是否根據須要懶惰呈現標籤，而不是提早，意思是在app打開的時候將底部標籤欄所有加載，默認false,推薦爲true  
         trueinitialRouteName： 設置默認的頁面組件  
         backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 爲不跳轉  
      
    tabBarOptions：配置標籤欄的一些屬性
         activeTintColor：label和icon的前景色 活躍狀態下  
         activeBackgroundColor：label和icon的背景色 活躍狀態下  
         inactiveTintColor：label和icon的前景色 不活躍狀態下  
         inactiveBackgroundColor：label和icon的背景色 不活躍狀態下  
         showLabel：是否顯示label，默認開啓 style：tabbar的樣式  
         labelStyle：label的樣式安卓屬性  
         activeTintColor：label和icon的前景色 活躍狀態下  
         inactiveTintColor：label和icon的前景色 不活躍狀態下  
         showIcon：是否顯示圖標，默認關閉  
         showLabel：是否顯示label，默認開啓 style：tabbar的樣式  
         labelStyle：label的樣式 upperCaseLabel：是否使標籤大寫，默認爲true  
         pressColor：material漣漪效果的顏色（安卓版本須要大於5.0）  
         pressOpacity：按壓標籤的透明度變化（安卓版本須要小於5.0）  
         scrollEnabled：是否啓用可滾動選項卡 tabStyle：tab的樣式  
         indicatorStyle：標籤指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，能夠將height設置爲0來暫時解決這個問題  
         labelStyle：label的樣式  
         iconStyle：圖標樣式  
複製代碼

1、App.js

首先在App.js中，導入庫，而且設置Navigator。性能

import { StackNavigator } from 'react-navigation'

const Navigator = StackNavigator(RouteConfig, StackNavigatorConfig);
複製代碼

其中RouteConfig，StackNavigatorConfig我分別寫在兩個文件中，StackNavigatorConfig能夠設置，也能夠不設置，主要能夠用來設置自定義動畫。動畫

2、RouteConfig.js

/*
* 導入視圖
*/
import MainTab from './TabNavigator'
import NewsDetail from './pages/subPages/NewsDetail'
import VideoDetail from './pages/subPages/VideoDetail'
import NewsSearch from './pages/subPages/NewsSearch'

/*

    --- 路由配置 ---

   * 全部組件都必須在這裏註冊
   * 在這裏設置的navigationOptions的權限 > 對應頁面裏面的 static navigationOptions的設置 > StackNavigator()第二個參數裏navigationOptions的設置
   * 該配置文件會在App.js裏的StackNavigator(導航組件)裏使用。

*/
const RouteConfig = {
    MainTab: {
        screen:MainTab,
        //navigationOptions: ({navigation}) => ({header: null})
    },
   // 下面三個頁面我須要隱藏導航欄
    NewsDetail: {
        screen: NewsDetail,
        navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})
    },
    VideoDetail: {
        screen: VideoDetail,
        navigationOptions: ({navigation}) => ({header:null, gesturesEnable:true})
    },
    NewsSearch: {
        screen: NewsSearch,
        navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})
    }
}

export default RouteConfig;
複製代碼

3、StackNavigatorConfig.js

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'

// 默認橫向跳轉
// 若是即將要跳轉到的頁面須要其它跳轉方式
// 可在路由參數中傳入 transition參數，可選值有：forHorizontal,forVertical,forFadeFromBottomAndroid,forFade
// 示例定義豎向跳轉：this.props.navigation.push('ProdDetail', {'prodID': item.id, 'transition':'forVertical'})
const screenInterpolater = (sceneProps) => {
    const { route } = sceneProps.scene;
    const params = route.params || {};
    const transition = params.transition || 'forHorizontal';
    return CardStackStyleInterpolator[transition](sceneProps);
};

const StackNavigationConfig = {
    initialRouteName: 'MainTab',
    headerMode: 'float',
    transitionConfig:() => ({
        //screenInterpolater: screenInterpolater
        screenInterpolater: CardStackStyleInterpolator.forHorizontal
    })
}

export default StackNavigationConfig;
複製代碼

4、TabNavigator.js

如今開始設置底部標籤欄，注意第二步裏面的MainTab就是在這個文件裏定義的。ui

import { TabNavigator } from 'react-navigation'
import Home from './pages/Home'
import Live from './pages/Live'
import Mine from './pages/Mine'
import Video from './pages/Video'

export default MainTab = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions:({navigation, screeProps}) => ({
            //這裏設置StackNavigator屬性和通常狀況下Tabbar不一樣頁面可能會不一樣的屬性

            //設置StackNavigator屬性
            header:null,
            headerTitle: '首頁',
            headerStyle: styles.navigator,
            headerTitleStyle: styles.navigatorTitle,
            gesturesEnabled:true,

            //這裏設置Tabbar不一樣頁面可能會不一樣的屬性
            tabBarVisible: true,
            tabBarLabel:'首頁',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? MainTabSelectedIcon : MainTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    },
    Live: {
        screen: Live,
        navigationOptions:({navigation, screeProps}) => ({
            //這裏設置StackNavigator屬性和通常狀況下Tabbar不一樣頁面可能會不一樣的屬性

            //設置StackNavigator屬性
            header:null,
            headerTitle: '直播',
            headerStyle:styles.navigator,
            headerTitleStyle:styles.navigatorTitle,
            gesturesEnabled:true,

            //這裏設置Tabbar不一樣頁面可能會不一樣的屬性
            tabBarVisible: true,
            tabBarLabel:'直播',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? LiveTabSelectedIcon : LiveTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    },
    Video: {
        screen: Video,
        navigationOptions:({navigation, screeProps}) => ({
            //這裏設置StackNavigator屬性和通常狀況下Tabbar不一樣頁面可能會不一樣的屬性

            //設置StackNavigator屬性
            header:null,
            headerTitle: '視頻',
            headerStyle:styles.navigator,
            headerTitleStyle:styles.navigatorTitle,
            gesturesEnabled:true,

            //這裏設置Tabbar不一樣頁面可能會不一樣的屬性
            tabBarVisible: true,
            tabBarLabel:'視頻',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? VideoTabSelectedIcon : VideoTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    },
    Mine: {
        screen: Mine,
        navigationOptions:({navigation, screeProps}) => ({
            //這裏設置StackNavigator屬性和通常狀況下Tabbar不一樣頁面可能會不一樣的屬性

            //設置StackNavigator屬性
            header:null,
            headerTitle: '個人',
            headerStyle:styles.navigator,
            headerTitleStyle:styles.navigatorTitle,
            gesturesEnabled:true,

            //這裏設置Tabbar不一樣頁面可能會不一樣的屬性
            tabBarVisible: true,
            tabBarLabel:'個人',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? MineTabSelectedIcon : MineTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    }
},{
    //這裏設置的是通常狀況下Tabbar共同的屬性
    tabBarPosition:'bottom', // 設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom')
    swipeEnabled:false, // 是否容許在標籤之間進行滑動。
    animationEnabled: false, // 是否在更改標籤時顯示動畫。
    lazy:true, // 是否根據須要懶惰呈現標籤，而不是提早製做，意思是在app打開的時候將底部標籤欄所有加載，默認false,推薦改爲true哦。
    initialRouteName:'', // 設置默認的頁面組件
    backBehavior:'none', // 按 back 鍵是否跳轉到第一個Tab(首頁)， none 爲不跳轉
    tabBarOptions:{
          activeTintColor:'#d81e06', // label和icon的前景色 活躍狀態下（選中）。
          inactiveTintColor:'#515151', // label和icon的前景色 不活躍狀態下(未選中)。
          labelStyle:{
              fontSize: 12,
          }, //label的樣式。
    }
})
複製代碼

5、完整代碼：

這裏有個用React Native實現網易新聞客戶端的項目，裏面除了使用了react-navigation外，還包括其餘一些經常使用庫的使用，須要的能夠點擊傳送門>>>this

6、截圖

首頁

首頁
視頻列表
視頻列表
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程