昨天分享了此專案中會安裝的套件有哪些。首先，我的第一步就是將 APP 的 路由設定建立，串聯好每個頁面的連結性。今天的目標就是完成這個部分！

由於要使用的套件是 react-navigation，在開發程式之前，先到套件官網了解下用法。由於要製作的 APP 分頁樣式導覽列是在底部，所以在網站上搜尋 Bottom Tabs Navigator 找到相關資訊。

1.建立專案目錄結構

在專案建立 src/screens 資料夾目錄

2.建立 Home.js 檔案

於 src/screens 下建立第一個 Home.js 檔案。打開檔案後，可以使用快捷鍵輸入 rnfc 生成 React Native 程式碼片段，節省之後輸入起手式程式碼的時間。建議初學者可以練習自己輸入這些程式碼，以熟悉 function 的定義方式。

//import liraries
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';

// create a component
const Home = () => {
  return (
    <View style={styles.container}>
      <Text>MyComponent</Text>
    </View>
  );
};

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50',
  },
});

//make this component available to the app
export default Home;

3.引入導航模組

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

透過createBottomTabNavigator建立一個 tab 實體

const Tab = createBottomTabNavigator(); 

4.包裹 NavigationContainer

使用 NavigationContainer 容器包裹住導航內容：

<NavigationContainer>
    // 導覽列選項定義
</NavigationContainer>

5.定義導航按鈕

定義在 APP 上導覽列的按鈕，以目前四個選項為例：

<Tab.Navigator>
           <Tab.Screen
              name="首頁"
              component={HomeMain}
              options={{
                tabBarLabel: '首頁',
                headerShown: false,
                tabBarActiveTintColor: 'orange',
                tabBarIcon: ({color, size}) => (
                  <Icon name="home" size={size} color={'orange'} />
                ),
              }}
            />
            
         <Tab.Screen
          options={{
            headerShown: false,
            tabBarActiveTintColor: 'orange',
            tabBarIcon: ({color, size}) => (
              <Icon name="shopping-cart" size={size} color={'orange'} />
            ),
          }}
          name="購物車"
          component={Profile}
        />
        <Tab.Screen
          options={{
            headerShown: false,
            tabBarActiveTintColor: 'orange',
            tabBarLabel: '訂單追蹤',
            tabBarIcon: ({color, size}) => (
              <Icon name="truck" size={size} color={'orange'} />
            ),
          }}
          name="訂單追蹤"
          component={OrderManage}
        />
        <Tab.Screen
          options={{
            tabBarLabel: '設定',
            tabBarActiveTintColor: 'orange',
            headerShown: false,
            tabBarIcon: ({color, size}) => (
              <Icon name="cog" size={size} color={'orange'} />
            ),
          }}
          name="設定"
          component={Login}
        />
            
</Tab.Navigator>

完整 Hoem.js

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

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

const Tab = createBottomTabNavigator();
 

const Home = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="首頁"
          component={HomeMain}
          options={{
            tabBarLabel: '首頁',
            headerShown: false,
            tabBarActiveTintColor: 'orange',
            
          }}
        />
        <Tab.Screen
          options={{
            headerShown: false,
            tabBarActiveTintColor: 'orange',
            
          }}
          name="購物車"
          component={Profile}
        />
        <Tab.Screen
          options={{
            headerShown: false,
            tabBarActiveTintColor: 'orange',
            tabBarLabel: '訂單追蹤',
            tabBarIcon: ({color, size}) => (
              <Icon name="truck" size={size} color={'orange'} />
            ),
          }}
          name="訂單追蹤"
          component={OrderManage}
        />
        <Tab.Screen
          options={{
            tabBarLabel: '設定',
            tabBarActiveTintColor: 'orange',
            headerShown: false,
              
          }}
          name="設定"
          component={Login}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default Home;

參考資源
react-navigation
bottom-tab-navigator