0Pricing
React Native Academy · Ders

Ekranlar Arasında Gezinme ve Parametre Aktarma

Ekranlar arasında geçiş yapmak için navigation.navigate kullanın, ikinci bağımsız değişkende parametreleri aktarın ve hedef ekranda bunları route.params ile okuyun.

Ekranlar Arasında Gezinme ve Parametre Aktarma, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

The navigation Prop in Screens

Every component registered as a screen in a React Navigation navigator automatically receives a navigation prop. This object provides methods to move between screens, go back, and manage the navigation stack. You can also access it in nested components using the useNavigation hook.

function HomeScreen({ navigation }) {
  // navigation.navigate, navigation.goBack, etc.
  return <View />;
}

Navigating with navigation.navigate

Call navigation.navigate('ScreenName') to move to another screen. If the screen is already in the stack and you navigate to it again, React Navigation will go to the existing instance rather than adding a duplicate. Use navigation.push('ScreenName') to always push a new instance.

function HomeScreen({ navigation }) {
  return (
    <Button
      title='Go to Details'
      onPress={() => navigation.navigate('Details')}
    />
  );
}

Going Back with navigation.goBack

Call navigation.goBack() to pop the current screen off the stack and return to the previous one. On iOS the swipe-back gesture is enabled by default. On Android, the hardware back button calls goBack automatically. Use navigation.popToTop() to jump all the way back to the first screen.

function DetailsScreen({ navigation }) {
  return (
    <Button
      title='Go Back'
      onPress={() => navigation.goBack()}
    />
  );
}

Passing Params When Navigating

Pass a second argument to navigation.navigate to send parameters to the destination screen. The params object can contain any serializable data — IDs, strings, booleans. Avoid passing complex non-serializable objects like class instances or functions.

function HomeScreen({ navigation }) {
  return (
    <Button
      title='View Post'
      onPress={() =>
        navigation.navigate('Details', {
          postId: 42,
          title: 'React Navigation Deep Dive',
        })
      }
    />
  );
}

Reading Params with route.params

The destination screen receives a route prop alongside the navigation prop. Access the parameters you passed via route.params. Always provide defaults in case a screen is opened without params, for example when it is the initial screen.

function DetailsScreen({ route, navigation }) {
  const { postId, title } = route.params ?? {};
  return (
    <View>
      <Text>Post ID: {postId}</Text>
      <Text>Title: {title}</Text>
    </View>
  );
}

Default Params on Stack.Screen

Set initialParams on a Stack.Screen to provide default parameter values. These defaults merge with any params passed at runtime, so the screen always has a complete set of values to work with, even when opened as the initial route.

<Stack.Screen
  name='Details'
  component={DetailsScreen}
  initialParams={{ postId: 0, title: 'Unknown' }}
/>

Updating Params from a Screen

A screen can update its own params using navigation.setParams. This is useful when an action on the current screen (like editing a form field) should be reflected in the navigation header title. The params update triggers a re-render of the screen.

function DetailsScreen({ route, navigation }) {
  const { title } = route.params;

  return (
    <Button
      title='Update Title'
      onPress={() => navigation.setParams({ title: 'Updated Title' })}
    />
  );
}

Using useNavigation Hook

Deep child components that are not registered screens do not receive the navigation prop automatically. Use the useNavigation() hook from React Navigation to access the navigation object anywhere inside the navigator tree without prop drilling.

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

function MyButton() {
  const navigation = useNavigation();
  return (
    <Button
      title='Go to Profile'
      onPress={() => navigation.navigate('Profile')}
    />
  );
}

Using useRoute Hook

Similarly, use the useRoute() hook to access route.params in a non-screen component. This is useful when you have a deeply nested component that needs to read the current screen's parameters without threading the route prop through every level.

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

function PostHeader() {
  const route = useRoute();
  const { title } = route.params ?? {};
  return <Text style={{ fontWeight: 'bold' }}>{title}</Text>;
}

Setting the Header Title from Params

You can dynamically set the navigation header title based on route params by passing a function to the options prop. The function receives the route object, allowing you to use param values as the screen title without extra state.

<Stack.Screen
  name='Details'
  component={DetailsScreen}
  options={({ route }) => ({ title: route.params.title ?? 'Details' })}
/>

Navigating Back and Sending Data Back

To send data from a child screen back to its parent, use navigation.navigate with the parent screen's name and include the return data as params. The parent screen will receive the updated params. Alternatively, pass a callback function as a param to the child screen and call it before going back.

// In child screen
navigation.navigate('Home', { selectedItem: 'apple' });

// In parent screen — read route.params.selectedItem

Quick Check

Test your understanding of React Navigation screen navigation and params from this lesson.

Lesson Recap

In this lesson you learned: use navigation.navigate to move to another screen, pass params as the second argument to navigate, and read params with route.params in the destination screen. Next up we explore the Bottom Tab Navigator.

Sıkça Sorulan Sorular

“Ekranlar Arasında Gezinme ve Parametre Aktarma” dersi ücretsiz mi?

Evet — “Ekranlar Arasında Gezinme ve Parametre Aktarma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.

“Ekranlar Arasında Gezinme ve Parametre Aktarma” dersinde ne öğreneceğim?

Ekranlar arasında geçiş yapmak için navigation.navigate kullanın, ikinci bağımsız değişkende parametreleri aktarın ve hedef ekranda bunları route.params ile okuyun. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Native Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Ekranlar Arasında Gezinme ve Parametre Aktarma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. React Navigation'ı Yükleme ve Yapılandırma
  2. Ekranlar Arasında Gezinme ve Parametre Aktarma
  3. Alt Sekme Gezinicisi
  4. Çekmece Gezinicisi ve İç İçe Geziniciler
← React Native Academy Sayfasına Dön