這篇繼續介紹React Native的導航與路由

當然，以下是一篇更詳細的React Native路由進階應用的文章，包含了更多的解釋和具體範例：

React Native路由的進階應用：掌握更多路由技巧

在React Native應用程序中，良好的路由管理不僅僅是將用戶引導到不同的頁面那麼簡單。這篇文章將深入探討React Native路由的進階應用，讓你能夠更靈活地處理複雜的應用邏輯。我們將學習如何傳遞參數、設定路由守衛，還會介紹深度頁面鏈接的實現方式。

1. 傳遞參數：

以下範例都將以上一篇所建立的兩個頁面Home和Profile中衍生

有時候，我們需要在不同的頁面之間傳遞參數。這可以通過路由參數實現。例如，在Home中點擊一個按鈕，將參數傳遞到Profile：

// 在Home中
import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const Home = () => {
  const navigation = useNavigation();

  const navigateToProfile = () => {
    navigation.navigate('Profile', { itemId: 123 });
  };

  return (
    <Button title="Go to Profile" onPress={navigateToProfile} />
  );
};

在Profile中，你可以這樣獲取傳遞的參數：

// 在Profile中
import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const Profile = () => {
  const route = useRoute();
  const { itemId } = route.params;

  return (
    <Text>Item ID: {itemId}</Text>
  );
};

2. 路由守衛：

有時候，我們需要保護某些頁面，只允許特定權限的用戶訪問。這可以通過路由守衛實現。例如，實現一個需要登錄權限的LoginScreen：

import React from 'react';
import { Text } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

const LoginScreen = () => {
  const isFocused = useIsFocused();

  if (!isFocused) {
    // 如果頁面不在焦點，可以執行一些操作，比如重新加載數據
  }

  return (
    <Text>User's Profile</Text>
  );
};

3. 深度頁面鏈接：

有時候，我們需要實現深度頁面鏈接，即在應用程序中的多個層次之間自由跳轉。這可以通過路由的組織和配置實現。例如，實現一個多層次的購物應用程序：

// 購物應用程序的路由配置
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import CartScreen from './CartScreen';
import ProfileScreen from './ProfileScreen';

const Tab = createBottomTabNavigator();

const AppNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Cart" component={CartScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

在這個例子中，我們使用了底部選項卡來實現多個層次的頁面切換。

這些是React Native路由的進階應用技巧和範例。藉由這些技術，可以構建更加複雜且具有高度互動性的React Native應用程序，提供更好的用戶體驗。