React Navigation 5.x版本實戰指南

若是你想了解React Navigation 5.x的基本的概念，能夠查看我以前的發的一篇文章：React Navigation 5.x詳解

若是說構成視圖元素的基本單位是組件，那麼構成應用程序的基本單位就是頁面。在前端應用中，頁面又稱爲路由，是應用程序頁面的抽象概念。因爲單頁面的應用是不存在的，那麼對於擁有多個頁面的應用程序來講，如何從一個頁面平滑地過渡到另外一個頁面，就是路由須要完成的事情。
在0.44版本以前。開發者能夠直接使用官方提供的Navigator組件來實現頁面的跳轉，不過Navigator組件對於稍大的項目支持並非很友好，且代碼的嵌套下降了代碼的可讀性。因此，官方推薦開發者使用react-navigation庫來管理頁面及其跳轉。
目前，react-navigation支持三種導航功能，分別是Tab導航、Drawer導航和Stack導航，它們的含義以下。

• Tab Navigation：用於實現頁面底部的Tab導航效果。
• Drawer Navigation：用於實現側邊欄抽屜導航效果。
• Stack Navigation：包含導航欄的頁面導航組件，用於實現頁面跳轉。

其中，開發中使用的最多的仍是Stack Navigation。和使用其餘的第三方庫同樣，使用react-navigation庫以前須要先安裝依賴腳本，以下所示。

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

上面的依賴庫是必須安裝的，它們是其它導航庫的基礎庫，而且這些基礎庫安裝完成以後，還須要在原生工程中連接原生插件。對於iOS環境來講，打開原生iOS工程目錄，而後執行pod install命令來安裝原生插件便可。
對於Android環境來講，因爲最新的React Native使用到了不少的Androidx屬性，因此使用react-navigation以前還須要在原生項目中添加Androidx屬性的支持。使用Android Studio打開原生Android工程，而後在app/build.gradle文件中添加以下腳本代碼。

android {
… //省略其餘腳本
packagingOptions {
        pickFirst "lib/arm64-v8a/librealm-jni.so"
 }
}

configurations.all {
    resolutionStrategy {
        force "com.facebook.soloader:soloader:0.8.2"
    }
}

def useIntlJsc = false
dependencies {
    …      //省略其餘腳本
    if (useIntlJsc) {
        implementation 'org.webkit:android-jsc-intl:+'
    } else {
        implementation 'org.webkit:android-jsc:+'
    }
}

從新編譯項目，若是沒有任何錯誤則說明成功集成react-navigation，若是遇到其餘問題，你們能夠根據提示進行修改。同時，因爲Tab Navigation、Drawer Navigation和Stack Navigation屬於不一樣的庫，因此實際使用過程當中還須要安裝對應的功能庫，以下所示。

npm install @react-navigation/stack          //Stack導航
npm install @react-navigation/bottom-tabs    //Tab導航
npm install @react-navigation/drawer         //Drawer導航

須要說明是，上面的三個庫是相互獨立的，使用時須要根據需求狀況來安裝對應的功能庫。
react-navigation庫一個最基本的功能就是實現路由的管理，路由管理使用的是Stack Navigation。藉助Stack Navigation，開發者能夠很輕鬆的管理路由頁面。和Android中的Activity棧管理同樣，每次打開一個的新頁面時，新頁面都會被放到路由棧的頂部。
首先，新建HomePage和DetailPage兩個頁面，代碼以下。

const HomePage=(navigation)=> {

  function jumpDetail() {
    navigation.navigate('Detail');
  }

  return (
      <View style={styles.ct}>
        <TouchableOpacity style={styles.touchableStyle} onPress={jumpDetail}>
          <Text style={styles.txtStyle}>
            跳轉詳情頁面
          </Text>
        </TouchableOpacity>

      </View>
  );
}

const DetailPage=()=> {
  return (
      <View style={styles.ct}>
        <Text style={{fontSize: 24}}>Detail Screen</Text>
      </View>
  );
}

接下來，使用createStackNavigator()函數建立一個路由堆棧導航器，記得使用export關鍵字導出文件，以下所示。

const Stack = createStackNavigator();

const RootStack= () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name='Home' component={HomePage}/>
                <Stack.Screen name='Detail' component={DetailPage}/>
            </Stack.Navigator>
        </NavigationContainer>);
}
export default RootStack;

其中，createStackNavigator()函數包含兩個屬性，即導航器和路由，分別對應NavigationContainer和Stack.Navigator兩個組件，而後再最外層使用導航狀態組件NavigationContainer進行包裹便可。
最後，React Native應用的App.js入口文件中引入堆棧導航器RootStack便可，以下所示。

const App = () => {
    return (
        <RootStack/>
    );
};

運行上面的代碼，點擊HomePage的跳轉按鈕便可跳轉到DetailPage頁面，效果下圖所示。

若是路由跳轉時須要傳遞參數，能夠在頁面跳轉時使用花括號包裹須要傳遞的參數，以下所示。

navigation.navigate('Detail',{
    itemId: 86,
    otherParam: 'anything you want here',
 });

而後，在接收參數的頁面使用route接收便可，以下所示。

const DetailPage=(router,navigation)=> {
  const { itemId } = route.params;
  const { otherParam } = route.params;
  … //省略其餘代碼
}

同時，Stack Navigation還提供了不少其餘有用的屬性，你們開發的時候根據須要來設置屬性的值。能夠發現，對於中大型項目來講，使用Stack Navigation進行路由管理時代碼層次是很是清晰的，也有助於項目的後期擴展。

除了Stack Navigation外，另外一個經常使用的功能是Tab Navigation。Tab Navigation主要用在底部Tab導航開發中，使用前須要先安裝bottom-tabs插件，安裝的命令以下。

npm install @react-navigation/bottom-tabs

建立Tab Navigation須要用到createBottomTabNavigator()函數，它包含兩個屬性，即導航器和路由，分別對應Tab.Navigator和Tab.Screen兩個組件，最後再使用NavigationContainer組件包裹它們，以下所示。

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const MainPage = () => {
    return (<NavigationContainer>
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({focused,size}) => {
                        let sourceImg;
                        if (route.name === 'Home') {
                            sourceImg = focused
                            ? require('./images/tab_home_p.png')
                            : require('./images/tab_home_n.png');
                        } else if (route.name === 'Me') {
                            sourceImg = focused
                            ? require('./images/tab_me_p.png')
                            :require('./images/tab_me_n.png');                  }
                        return <Image source={sourceImg}/>;
                    },
                })}
                tabBarOptions={{
                    activeTintColor: 'green',
                    inactiveTintColor: 'gray',
                }}>
                <Tab.Screen name="Home" component={HomeScreen}/>
                <Tab.Screen name="Me" component={MeScreen}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
};

export default MainPage;

function HomeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{fontSize:28 }}>Home Page</Text>
        </View>
    );
}

function MeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{fontSize:28 }}>Me Page</Text>
        </View>
    );
}

同時，Tab.Navigator和Tab.Screen都提供了不少不錯的屬性，開發者能夠根據開發須要來設置屬性值。運行上面的代碼，效果以下圖所示。