Stack Navigator: τι είναι, πλοήγηση στοίβας στο React Native

Τι είναι το Stack Navigator;

Stack Navigator — ένας από τους βασικούς πλοηγούς της βιβλιοθήκης React Navigation που υλοποιεί το μοντέλο στοίβας οθονών. Παρέχει οικεία πλοήγηση για χρήστες κινητών: το άνοιγμα μιας νέας οθόνης συνοδεύεται από κινούμενα γραφικά εισόδου από τα δεξιά και το κουμπί «Πίσω» ή η χειρονομία σάρωσης επαναφέρει τον χρήστη στην προηγούμενη οθόνη. Το Stack Navigator υποστηρίζεται σε iOS και Android, χρησιμοποιώντας εγγενή στοιχεία πλατφόρμας για μέγιστη απόδοση.

Το React Navigation είναι η πιο δημοφιλής βιβλιοθήκη πλοήγησης για React Native, εγκατεστημένη στο 85% των έργων (σύμφωνα με δεδομένα npm, 2026). Το Stack Navigator αποτελεί μέρος του πυρήνα του και είναι διαθέσιμο σε δύο υλοποιήσεις: createNativeStackNavigator (εγγενής, συνιστώμενη) και createStackNavigator (JavaScript, για σύνθετα προσαρμοσμένα κινούμενα γραφικά). Η εγγενής έκδοση εμφανίστηκε στο React Navigation v5 και έγινε πρότυπο στο v6+.

Το κύριο πλεονέκτημα του Stack Navigator — φυσική συμπεριφορά, οικεία σε χρήστες iOS και Android. Στο iOS, η στοίβα αναπαρίσταται οπτικά ως UINavigationController, στο Android — ως FragmentManager με κινούμενα γραφικά slide. Ο προγραμματιστής δεν χρειάζεται να υλοποιήσει χειροκίνητα τη λογική στοίβας — ο πλοηγός διαχειρίζεται αυτόματα τις καταστάσεις οθονών, το back stack και τα κινούμενα γραφικά.

Πώς λειτουργεί η πλοήγηση στοίβας

Πλοήγηση στοίβας βασίζεται στην αρχή LIFO (Last In, First Out). Όταν ο χρήστης ανοίγει μια νέα οθόνη, ο πλοηγός την τοποθετεί στην κορυφή της στοίβας. Πατώντας «Πίσω», η επάνω οθόνη αφαιρείται και ο χρήστης βλέπει την προηγούμενη. Η στοίβα μπορεί να περιέχει οποιονδήποτε αριθμό οθονών — ο περιορισμός είναι μόνο η μνήμη της συσκευής.

Κάθε οθόνη στη στοίβα διατηρεί την κατάστασή της. Κατά την επιστροφή στην προηγούμενη οθόνη, η κατάστασή της αποκαθίσταται αυτόματα. Αυτό διακρίνει τη στοίβα από άλλους τύπους πλοήγησης (Tab, Drawer), όπου οι οθόνες μπορεί να αναδημιουργηθούν. Το React Navigation διαχειρίζεται την κατάσταση μέσω του δικού του μηχανισμού περιβάλλοντος πλοήγησης.

Χειρονομία σάρωσης για επιστροφή

Στο iOS, το Stack Navigator υποστηρίζει χειρονομία σάρωσης από το αριστερό άκρο της οθόνης για επιστροφή — αυτή είναι η τυπική συμπεριφορά iOS που αναμένουν οι χρήστες. Στο Android, η χειρονομία είναι απενεργοποιημένη από προεπιλογή, αλλά μπορεί να ενεργοποιηθεί μέσω της επιλογής gestureEnabled. Στο Native Stack, η χειρονομία λειτουργεί εγγενώς, χωρίς καθυστερήσεις του νήματος JavaScript.

Native Stack εναντίον JS Stack

Το React Navigation προσφέρει δύο τύπους Stack Navigator: Native Stack (createNativeStackNavigator) και JS Stack (createStackNavigator). Η κύρια διαφορά είναι το σημείο εκτέλεσης των κινούμενων γραφικών. Το Native Stack χρησιμοποιεί εγγενή προγράμματα οδήγησης κινούμενων γραφικών iOS και Android, ενώ το JS Stack λειτουργεί μέσω του νήματος JavaScript του React Native. Η επιλογή μεταξύ τους εξαρτάται από τις απαιτήσεις απόδοσης και προσαρμογής.

Native Stack συνιστάται για τα περισσότερα έργα. Παρέχει ομαλά κινούμενα γραφικά 60 FPS χωρίς μπλοκάρισμα του νήματος JS, υποστηρίζει τη χειρονομία σάρωσης συστήματος στο iOS και χρησιμοποιεί εγγενείς μεταβάσεις — slide στο iOS, fade στο Android. Ωστόσο, το Native Stack είναι περιορισμένο στην προσαρμογή κινούμενων γραφικών: διατίθεται μόνο ένα προκαθορισμένο σύνολο μεταβάσεων.

JS Stack δίνει πλήρη έλεγχο στα κινούμενα γραφικά μέσω του cardStyleInterpolator. Ο προγραμματιστής μπορεί να δημιουργήσει οποιοδήποτε κινούμενο γραφικό: κλιμάκωση, περιστροφή, παράλλαξη, προσαρμοσμένες καμπύλες. Μειονέκτημα — τα κινούμενα γραφικά λειτουργούν στο νήμα JS, το οποίο μπορεί να προκαλέσει πτώση καρέ σε αδύναμες συσκευές με σύνθετες μεταβάσεις. Για το 70% των έργων, το Native Stack είναι υπεραρκετό.

// Native Stack — συνιστώμενη υλοποίηση
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Εγκατάσταση και ρύθμιση του Stack Navigator

Για να ξεκινήσετε με το Stack Navigator, πρέπει να εγκαταστήσετε το React Navigation και τις εξαρτήσεις του. Το ελάχιστο σύνολο περιλαμβάνει @react-navigation/native, @react-navigation/native-stack και react-native-screens. Μετά την εγκατάσταση, η εφαρμογή τυλίγεται σε NavigationContainer — περιβάλλον που παρέχει κατάσταση πλοήγησης σε όλα τα θυγατρικά στοιχεία.

# Εγκατάσταση εξαρτήσεων React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Για iOS — εγκατάσταση pod
cd ios && pod install && cd ..

Μετά την εγκατάσταση, δημιουργείται ο Stack.Navigator με καθορισμένες οθόνες στο RootStackParamList. Κάθε οθόνη συνδέεται με ένα στοιχείο React μέσω του component prop. Ο πλοηγός μπορεί να είναι ριζικός ή ένθετος σε άλλο πλοηγό (Tab, Drawer). Για ρύθμιση χρησιμοποιούνται τα screenOptions — κοινά για όλες τις οθόνες ή ξεχωριστά για καθεμία.

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

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Αρχική' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Παράμετροι και προσαρμογή του Stack Navigator

Stack Navigator προσφέρει πολλές επιλογές για προσαρμογή εμφάνισης και συμπεριφοράς. Οι κύριες παράμετροι ρυθμίζονται μέσω screenOptions σε επίπεδο Navigator ή options σε επίπεδο Screen. Ο προγραμματιστής μπορεί να διαμορφώσει τον τίτλο, τα κινούμενα γραφικά μετάβασης, τη χειρονομία σάρωσης, το στυλ κάρτας και το σκούρο φόντο. Η ευελιξία των ρυθμίσεων επιτρέπει την προσαρμογή της πλοήγησης στο σύστημα σχεδιασμού της εφαρμογής.

Προσαρμοσμένα κινούμενα γραφικά μέσω cardStyleInterpolator

Για JS Stack, το cardStyleInterpolator επιτρέπει τη δημιουργία αυθαίρετων κινούμενων μεταβάσεων μεταξύ οθονών. Είναι ένα ισχυρό εργαλείο για την υλοποίηση μοναδικών οπτικών εφέ: κλιμάκωση, περιστροφή, παράλλαξη, οριζόντιο flip. Η συνάρτηση λαμβάνει τις τρέχουσες τιμές προόδου των κινούμενων γραφικών (current, next) και επιστρέφει στυλ για τα κινούμενα στοιχεία.

Τυποποίηση πλοήγησης με TypeScript

Stack Navigator υποστηρίζει πλήρη τυποποίηση μέσω TypeScript. Για αυτό ορίζεται το RootStackParamList — ένας τύπος-αντικείμενο όπου τα κλειδιά είναι ονόματα οθονών και οι τιμές είναι τύποι παραμέτρων. Μετά την τυποποίηση, τα navigation.navigate και route.params λαμβάνουν αυτόματη συμπλήρωση και έλεγχο τύπων. Αυτό εξαλείφει σφάλματα μετάδοσης παραμέτρων στο στάδιο μεταγλώττισης.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Τυποποιημένη οθόνη
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Προϊόν {id} — {category}</Text>
      <Button title="Στο καλάθι"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Προχωρημένα σενάρια: modal παράθυρα και ομάδες

Stack Navigator υποστηρίζει ομαδοποίηση οθονών και modal παράθυρα. Οι ομάδες (Screen Group) επιτρέπουν την εφαρμογή κοινών ρυθμίσεων σε πολλές οθόνες χωρίς επανάληψη. Τα modal παράθυρα υλοποιούνται μέσω stack presentation: 'modal' — η οθόνη ανοίγει από κάτω με σκούρο φόντο, όπως ένα modal συστήματος στο iOS. Αυτή η επιλογή είναι διαθέσιμη μόνο στο Native Stack.

Για σύνθετη πλοήγηση, το Stack Navigator μπορεί να ενσωματωθεί σε Tab Navigator ή Drawer Navigator. Για παράδειγμα, η καρτέλα «Αρχική» περιέχει τη δική της στοίβα οθονών και η καρτέλα «Προφίλ» — τη δική της. Μια τέτοια σύνθεση πλοηγών είναι η τυπική προσέγγιση για εφαρμογές παραγωγής. Κάθε στοίβα είναι απομονωμένη: το back stack μέσα σε μια καρτέλα δεν επηρεάζει άλλες καρτέλες.

// Ένθετη στοίβα στο Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Ομάδες οθονών με κοινές επιλογές
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>