React Native開發之react-navigation庫詳解

時間 2019-11-08

標籤 react native 開發 navigation 詳解欄目 React 简体版

原文原文鏈接

衆所周知，在多頁面應用程序中，頁面的跳轉是經過路由或導航器來實現的。在0.44版本以前，開發者能夠直接使用官方提供的Navigator組件來實現頁面的跳轉，不過從0.44版本開始，Navigator被官方從react native的核心組件庫中剝離出來，放到react-native-deprecated-custom-components的模塊中。若是開發者須要繼續使用Navigator，則須要先使用yarn add react-native-deprecated-custom-components命令安裝後再使用。不過，官方並不建議開發者這麼作，而是建議開發者直接使用導航庫react-navigation。react-navigation是React Native社區很是著名的頁面導航庫，能夠用來實現各類頁面的跳轉操做。目前，react-navigation支持三種類型的導航器，分別是StackNavigator、TabNavigator和DrawerNavigator。具體區別以下：

StackNavigator：包含導航欄的頁面導航組件，相似於官方的Navigator組件。
TabNavigator：底部展現tabBar的頁面導航組件。
DrawerNavigator：用於實現側邊欄抽屜頁面的導航組件。

須要說明的是，因爲react-navigation在3.x版本進行了較大的升級，因此在使用方式上與2.x版本會有不少的不一樣。和其餘的第三方插件庫同樣，使用以前須要先在項目匯中添加react-navigation依賴，安裝的命令以下：java

yarn add react-navigation
//或者
npm install react-navigation --save
複製代碼

安裝完成以後，能夠在package.json文件的dependencies節點看到react-navigation的依賴信息。react

"react-navigation": "^3.8.1"
複製代碼

因爲react-navigation依賴於react-native-gesture-handler庫，因此還須要安裝react-native-gesture-handler，安裝的命令以下：npm

yarn add react-native-gesture-handler
//獲取
npm install --save react-native-gesture-handle
複製代碼

同時，因爲react-native-gesture-handler須要依賴原生環境，因此在須要使用link命令連接原生依賴，命令以下：json

react-native link react-native-gesture-handler
複製代碼

爲了保證react-native-gesture-handler可以成功的運行在Android系統上，須要在Android工程的MainActivity.java中添加以下代碼：react-native

public class MainActivity extends ReactActivity {
    ...
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

複製代碼

而後，就可使用react-navigation進行頁面導航功能開發，如圖7-12所示，是使用createStackNavigator實現頁面導航的示例。 bash

在createStackNavigator模式下，爲了方便對頁面進行統一管理，首先新建一個RouterConfig.js文件，並使用createStackNavigator註冊頁面。對於應用的初始頁面還須要使用initialRouteName進行申明。同時，導航器棧還須要使用createAppContainer函數進行包裹。例如：

import {createAppContainer,createStackNavigator} from 'react-navigation';

import MainPage from './MainPage'
import DetailPage from "./DetailPage";

const AppNavigator = createStackNavigator({
    MainPage: MainPage,       
    DetailPage:DetailPage
},{
   initialRouteName: "MainPage",
},
);
export default createAppContainer(AppNavigator);

複製代碼

其中，createStackNavigator用於配置棧管理的頁面，它支持的配置選項有：ide

path：路由中設置的路徑映射配置。
initialRouteName：設置棧管理方式的默認頁面，且此默認頁面必須是路由配置中的某一個。
initialRouteParams：初始路由參數。
defaultNavigationOptions：用於配置導航欄的默認導航選項。
mode：定義渲染和頁面跳轉的樣式，選項有card和modal，默認爲card。
headerMode：定義返回上級頁面時動畫效果，選項有float、screen和none。

最後，在入口文件中以組件的方式引入StackNavigatorPage.js文件便可。例如：函數

import StackNavigatorPage from './src/StackNavigatorPage'

export default class App extends Component<Props> {
  render() {
    return (
      <StackNavigatorPage/>
    );
  }
}

複製代碼

要實現頁面的棧管理功能或跳轉功能，還須要再至少新建兩個子頁面，例如MainPage.js和DetailPage.js。動畫

export default class MainPage extends PureComponent {

    static navigationOptions = {
        header: null,        //默認頁面去掉導航欄
    };

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <TouchableOpacity onPress={() => {
                    navigate('DetailPage')}}>
                    <Text style={styles.textStyle}>跳轉詳情頁</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default class DetailPage extends PureComponent {

    static navigationOptions = {
        title: '詳情頁',
    };

    render() {
        let url = 'http://www.baidu.com';
        return (
            <View>
                <WebView
                    style={{width:'100%',height:'100%'}}
                    source={{uri: url}}/>
            </View>
        );
    }
}

複製代碼

除了示例中使用到的navigationOptions屬性，StackNavigator導航器支持的navigationOptions屬性還包括：ui

header：設置導航屬性，若是設置爲null則隱藏頂部導航欄。
headerTitle：設置導航欄標題。
headerBackImage：設置後退按鈕的自定義圖片。
headerBackTitle：設置跳轉頁面左側返回箭頭後面的文字，默認是上一個頁面的標題。
headerTruncatedBackTitle：設置上個頁面標題不符合返回箭頭後面的文字時顯示的文字。
headerRight：設置導航欄右側展現的React組件。
headerLeft：設置標題欄左側展現的React組件。
headerStyle：設置導航條的樣式，如背景色、寬高等。
headerTitleStyle：設置導航欄的文字樣式。
headerBackTitleStyle：設置導航欄上【返回】文字的樣式。
headerLeftContainerStyle：自定義導航欄左側組件容器的樣式，例如增長padding值。
headerRightContainerStyle：自定義導航欄右側組件容器的樣式，例如增長 padding值。
headerTitleContainerStyle：自定義導航欄標題組件容器的樣式，例如增長 padding值。
headerTintColor：設置導航欄的顏色。
headerPressColorAndroid：設置導航欄被按下時的顏色紋理，Android須要版本大於5.0。
headerTransparent：設置標題背景是否透明。
gesturesEnabled：設置是否可使用手勢關閉當前頁面，iOS默認開啓，Android默認關閉。

除了能夠實現路由管理和頁面跳轉操做外，還可使用react-navigation實現頂部和底部的Tab切換，如圖7-13所示。

若是要實現底部選項卡切換功能，能夠直接使用react-navigation提供的createBottomTabNavigator接口，而且此導航器須要使用createAppContainer函數包裹後才能做爲React組件被正常調用。例如：

import React, {PureComponent} from 'react';
import {StyleSheet, Image} from 'react-native';
import {createAppContainer, createBottomTabNavigator} from 'react-navigation'

import Home from './tab/HomePage'   
import Mine from './tab/MinePage'

const BottomTabNavigator = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: () => ({
                tabBarLabel: '首頁',
                tabBarIcon:({focused})=>{
                    if(focused){
                        return(
                          <Image/>   //選中的圖片
                        )
                    }else{
                        return(
                           <Image/>   //默認圖片                      
  )
                    }
                }
            }),
        },
        Mine: {
            screen: Mine,
            navigationOptions: () => ({
                tabBarLabel: '個人',
                tabBarIcon:({focused})=>{
                    …
                }
            })
        }
    }, {  //默認參數設置
        initialRouteName: 'Home',
        tabBarPosition: 'bottom',
        showIcon: true,
        showLabel: true,
        pressOpacity: 0.8,
        tabBarOptions: {
            activeTintColor: 'green',
            style: {
                backgroundColor: '#fff',
            },
        }
    }
);

const AppContainer = createAppContainer(BottomTabNavigator);

export default class TabBottomNavigatorPage extends PureComponent {

    render() {
        return (
            <AppContainer/>
        );
    }
}

複製代碼

固然，除了支持建立底部選項卡以外，react-navigation還支持建立頂部選項卡，此時只須要使用react-navigation提供的createMaterialTopTabNavigator便可。若是要使用實現抽屜式菜單功能，還可使用react-navigation提供的createDrawerNavigator。

附： react-navigation官網