{"id":34326,"date":"2025-11-15T06:00:56","date_gmt":"2025-11-15T03:00:56","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/"},"modified":"2025-11-15T06:00:56","modified_gmt":"2025-11-15T03:00:56","slug":"react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/","title":{"rendered":"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<p><body><\/p>\n<p>React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation&#8217;\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.<\/p>\n<p>Modern mobil uygulamalar\u0131n olmazsa olmaz\u0131, kullan\u0131c\u0131lar\u0131n ekranlar aras\u0131nda sorunsuz ve sezgisel bir \u015fekilde gezinmesini sa\u011flayan g\u00fc\u00e7l\u00fc bir navigasyon sistemidir. React Native ile uygulama geli\u015ftirirken, kullan\u0131c\u0131 deneyiminin (UX) temelini olu\u015fturan bu navigasyon mekanizmas\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak kritik bir \u00f6neme sahiptir. Peki, bir ekran\u0131n ne zaman y\u00fcklendi\u011fi (mount), ne zaman odakland\u0131\u011f\u0131 (focus), ne zaman oda\u011f\u0131n\u0131 kaybetti\u011fi (blur) veya ne zaman kald\u0131r\u0131ld\u0131\u011f\u0131 (unmount) gibi ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131 uygulaman\u0131z\u0131n performans\u0131, bellek t\u00fcketimi ve genel kullan\u0131c\u0131 ak\u0131\u015f\u0131 \u00fczerinde ne gibi etkilere sahiptir? Bu sorular\u0131n cevaplar\u0131, daha optimize ve hatas\u0131z uygulamalar geli\u015ftirmenizin anahtar\u0131d\u0131r.<\/p>\n<p>React Navigation, React Native ekosistemindeki en pop\u00fcler ve g\u00fc\u00e7l\u00fc navigasyon k\u00fct\u00fcphanesidir. Ancak, sundu\u011fu esneklik ve zengin \u00f6zellikler beraberinde karma\u015f\u0131kl\u0131k da getirebilir. Uygulaman\u0131z\u0131n her bir ekran\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca hangi olaylar\u0131 tetikledi\u011fini bilmek, gereksiz yeniden render i\u015flemlerini \u00f6nlemek, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 tespit etmek ve kullan\u0131c\u0131ya daha ak\u0131c\u0131 bir deneyim sunmak i\u00e7in hayati \u00f6neme sahiptir. \u00d6rne\u011fin, bir profil sayfas\u0131n\u0131n her odakland\u0131\u011f\u0131nda g\u00fcncel verileri \u00e7ekmesi gerekti\u011finde, bu i\u015flemi do\u011fru ya\u015fam d\u00f6ng\u00fcs\u00fc olay\u0131na ba\u011flamak, hem performans\u0131 art\u0131r\u0131r hem de kullan\u0131c\u0131ya her zaman en yeni bilgiyi sunar. Aksi takdirde, verilerin eski kalmas\u0131 veya gereksiz yere birden \u00e7ok kez \u00e7ekilmesi gibi sorunlarla kar\u015f\u0131la\u015fabilirsiniz.<\/p>\n<p>Bu makale boyunca, React Navigation&#8217;\u0131n temelden ileri seviyeye kadar t\u00fcm ya\u015fam d\u00f6ng\u00fcs\u00fc mekanizmalar\u0131n\u0131 derinlemesine inceleyece\u011fiz. Ekranlar\u0131n mount, unmount, focus ve blur durumlar\u0131n\u0131 nas\u0131l y\u00f6netti\u011fimizi, farkl\u0131 navigat\u00f6r tiplerinin (Stack, Tab, Drawer) bu durumlara nas\u0131l etki etti\u011fini ve performans optimizasyonu i\u00e7in hangi teknikleri kullanabilece\u011fimizi \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z. Ayr\u0131ca, ger\u00e7ek d\u00fcnya senaryolar\u0131nda kar\u015f\u0131la\u015fabilece\u011finiz sorunlara \u00e7\u00f6z\u00fcm bulman\u0131z\u0131 sa\u011flayacak vaka analizleri ve ipu\u00e7lar\u0131 da sunaca\u011f\u0131z. Haz\u0131rsan\u0131z, React Native navigasyonunun gizemli d\u00fcnyas\u0131na bir yolculu\u011fa \u00e7\u0131kal\u0131m!<\/p>\n<h2>Temel Kavramlar: React Native Navigasyonunu Tan\u0131yal\u0131m<\/h2>\n<p>React Native navigasyon d\u00fcnyas\u0131na ad\u0131m atmadan \u00f6nce, temel kavramlar\u0131 sa\u011flam bir zemine oturtmak olduk\u00e7a \u00f6nemlidir. React Navigation, uygulaman\u0131z\u0131n ekranlar aras\u0131 ge\u00e7i\u015flerini y\u00f6netmek i\u00e7in bir dizi bile\u015fen ve API sunar. Temelde, her bir ekran (Screen), bir navigat\u00f6r (Navigator) i\u00e7inde tan\u0131mlan\u0131r ve bu navigat\u00f6rler, uygulaman\u0131z\u0131n gezinme hiyerar\u015fisini olu\u015fturur. Bu hiyerar\u015fi, kullan\u0131c\u0131lar\u0131n bir ekrandan di\u011ferine nas\u0131l ge\u00e7i\u015f yapt\u0131\u011f\u0131n\u0131, geri d\u00f6n\u00fc\u015f mekanizmalar\u0131n\u0131 ve ekranlar\u0131n nas\u0131l y\u0131\u011f\u0131ld\u0131\u011f\u0131n\u0131 veya kald\u0131r\u0131ld\u0131\u011f\u0131n\u0131 belirler.<\/p>\n<p>React Navigation&#8217;daki en yayg\u0131n navigat\u00f6r tipleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Stack Navigator:<\/strong> Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, ekranlar\u0131 bir &#8220;y\u0131\u011f\u0131n&#8221; (stack) yap\u0131s\u0131nda y\u00f6netir. Yeni bir ekran a\u00e7t\u0131\u011f\u0131n\u0131zda, mevcut ekran\u0131n \u00fczerine itilir ve geri d\u00fc\u011fmesine bast\u0131\u011f\u0131n\u0131zda \u00fcstteki ekran y\u0131\u011f\u0131ndan kald\u0131r\u0131l\u0131r. Bu, web taray\u0131c\u0131lar\u0131n\u0131n ge\u00e7mi\u015f y\u00f6netimine benzer bir model sunar.<\/li>\n<li><strong>Tab Navigator:<\/strong> Genellikle uygulaman\u0131n alt k\u0131sm\u0131nda veya \u00fcst k\u0131sm\u0131nda g\u00f6r\u00fcnen sekmeler arac\u0131l\u0131\u011f\u0131yla farkl\u0131 ana b\u00f6l\u00fcmlere h\u0131zl\u0131 eri\u015fim sa\u011flar. Her sekme, kendi i\u00e7inde ayr\u0131 bir navigasyon y\u0131\u011f\u0131n\u0131na sahip olabilir.<\/li>\n<li><strong>Drawer Navigator:<\/strong> Genellikle ekran\u0131n solundan veya sa\u011f\u0131ndan kayarak a\u00e7\u0131lan bir men\u00fc \u015feklinde \u00e7al\u0131\u015f\u0131r ve genellikle uygulaman\u0131n ana b\u00f6l\u00fcmlerine eri\u015fim sa\u011flar.<\/li>\n<\/ul>\n<p>\u015eimdi, &#8220;ya\u015fam d\u00f6ng\u00fcs\u00fc&#8221; kavram\u0131na gelelim. Bir React Native ekran\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc, ilgili ekran\u0131n bir navigasyon y\u0131\u011f\u0131n\u0131na eklenmesinden (mount), kullan\u0131c\u0131 taraf\u0131ndan g\u00f6r\u00fcn\u00fcr hale gelmesine (focus), ba\u015fka bir ekrana ge\u00e7i\u015f yaparak arka plana d\u00fc\u015fmesine (blur) ve en sonunda tamamen bellekten kald\u0131r\u0131lmas\u0131na (unmount) kadar ge\u00e7en s\u00fcreci ifade eder. Bu olaylar\u0131 do\u011fru anlamak, uygulaman\u0131z\u0131n kaynaklar\u0131n\u0131 verimli kullanmak ve kullan\u0131c\u0131ya kesintisiz bir deneyim sunmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p>\u00d6rne\u011fin, bir ekran\u0131n <code>mount<\/code> edilmesi, o ekran\u0131n bile\u015fenlerinin ilk kez olu\u015fturuldu\u011fu ve DOM&#8217;a eklendi\u011fi anlam\u0131na gelir. <code>unmount<\/code> ise, ekran\u0131n DOM&#8217;dan kald\u0131r\u0131ld\u0131\u011f\u0131 ve kaynaklar\u0131n\u0131n serbest b\u0131rak\u0131ld\u0131\u011f\u0131 durumdur. <code>focus<\/code> olay\u0131, kullan\u0131c\u0131n\u0131n o anda etkile\u015fimde oldu\u011fu ekran\u0131, <code>blur<\/code> olay\u0131 ise arka plana d\u00fc\u015fen veya oda\u011f\u0131n\u0131 kaybeden ekran\u0131 temsil eder. Bu durumlar, \u00f6zellikle veri \u00e7ekme, animasyon ba\u015flatma veya bellek t\u00fcketen i\u015flemler yaparken do\u011fru zamanda m\u00fcdahale etmenizi sa\u011flar. \u0130leriye d\u00f6n\u00fck olarak, bu ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131n\u0131 React hook&#8217;lar\u0131 ile nas\u0131l y\u00f6netece\u011fimizi daha detayl\u0131 inceleyece\u011fiz.<\/p>\n<h2>Ekran Ya\u015fam D\u00f6ng\u00fcs\u00fc Olaylar\u0131: <code>useFocusEffect<\/code> ve Di\u011fer Hook&#8217;lar Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n<p>React Navigation&#8217;da bir ekran\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc anlamak ve y\u00f6netmek, uygulaman\u0131z\u0131n hem performans\u0131 hem de veri tutarl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. Bu ba\u011flamda, <code>useFocusEffect<\/code> hook&#8217;u ve standart React hook&#8217;lar\u0131 (\u00f6zellikle <code>useEffect<\/code>) aras\u0131ndaki farklar\u0131 kavramak b\u00fcy\u00fck fayda sa\u011flayacakt\u0131r. Bir ekran\u0131n temel ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Mount:<\/strong> Ekran bile\u015feninin ilk kez olu\u015fturulmas\u0131 ve navigasyon a\u011fac\u0131na eklenmesi. Bu genellikle bir ekran ilk kez a\u00e7\u0131ld\u0131\u011f\u0131nda veya navigat\u00f6r bile\u015feni ilk render edildi\u011finde ger\u00e7ekle\u015fir.<\/li>\n<li><strong>Unmount:<\/strong> Ekran bile\u015feninin navigasyon a\u011fac\u0131ndan kald\u0131r\u0131lmas\u0131 ve bellekten serbest b\u0131rak\u0131lmas\u0131. Bu, genellikle bir y\u0131\u011f\u0131ndan (stack) bir ekran\u0131 geri \u00e7ekti\u011finizde veya bir tab navigat\u00f6r\u00fcnde tamamen farkl\u0131 bir sekmeye ge\u00e7i\u015f yap\u0131p eski sekmenin bile\u015fenlerinin kald\u0131r\u0131lmas\u0131na izin verildi\u011finde meydana gelir.<\/li>\n<li><strong>Focus:<\/strong> Ekran\u0131n kullan\u0131c\u0131 taraf\u0131ndan g\u00f6r\u00fcn\u00fcr ve etkile\u015fimde olunur hale gelmesi. Bir y\u0131\u011f\u0131ndaki en \u00fcstteki ekran veya o anda se\u00e7ili olan tab ekran\u0131 odaklanm\u0131\u015f durumdad\u0131r.<\/li>\n<li><strong>Blur:<\/strong> Ekran\u0131n oda\u011f\u0131n\u0131 kaybetmesi ve arka plana ge\u00e7mesi. Ba\u015fka bir ekrana ge\u00e7ti\u011finizde veya bir modal a\u00e7\u0131ld\u0131\u011f\u0131nda, mevcut ekran &#8220;blur&#8221; durumuna ge\u00e7er.<\/li>\n<\/ul>\n<p>Peki, bu olaylar\u0131 React bile\u015fenlerimizde nas\u0131l yakalar\u0131z? Standart React&#8217;in <code>useEffect<\/code> hook&#8217;u <code>mount<\/code> ve <code>unmount<\/code> durumlar\u0131n\u0131 y\u00f6netmek i\u00e7in harikad\u0131r. \u00d6rne\u011fin, bir API \u00e7a\u011fr\u0131s\u0131n\u0131 ekran y\u00fcklendi\u011finde yapmak veya bir aboneli\u011fi temizlemek i\u00e7in <code>useEffect<\/code> kullanabilirsiniz:<\/p>\n<pre><code>\nimport React, { useEffect } from 'react';\nimport { View, Text } from 'react-native';\n\nfunction ProfileScreen() {\n  useEffect(() => {\n    console.log('ProfileScreen y\u00fcklendi (mounted)');\n    \/\/ API \u00e7a\u011fr\u0131s\u0131 yap, abonelik ba\u015flat\n    return () => {\n      console.log('ProfileScreen kald\u0131r\u0131ld\u0131 (unmounted)');\n      \/\/ Aboneli\u011fi temizle, kaynaklar\u0131 serbest b\u0131rak\n    };\n  }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi ile sadece mount ve unmount'ta \u00e7al\u0131\u015f\u0131r\n\n  return (\n    <View>\n      <Text>Profil Sayfas\u0131<\/Text>\n    <\/View>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Ancak, <code>useEffect<\/code> tek ba\u015f\u0131na <code>focus<\/code> ve <code>blur<\/code> olaylar\u0131n\u0131 do\u011frudan izlemez. Bir ekran, bir Stack Navigator'da ba\u015fka bir ekran\u0131n alt\u0131na itildi\u011finde veya bir Tab Navigator'da farkl\u0131 bir sekmeye ge\u00e7ildi\u011finde <code>unmount<\/code> olmayabilir; sadece oda\u011f\u0131n\u0131 kaybeder (<code>blur<\/code>). \u0130\u015fte bu noktada <code>@react-navigation\/native<\/code> paketinden gelen <code>useFocusEffect<\/code> hook'u devreye girer. <code>useFocusEffect<\/code>, bir ekran odakland\u0131\u011f\u0131nda (focus) \u00e7al\u0131\u015fan bir etki (effect) kaydetmenizi sa\u011flar ve ekran oda\u011f\u0131n\u0131 kaybetti\u011finde (blur) veya bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda temizleme (cleanup) i\u015flevi d\u00f6nd\u00fcrebilirsiniz.<\/p>\n<pre><code>\nimport React, { useCallback } from 'react';\nimport { View, Text } from 'react-native';\nimport { useFocusEffect } from '@react-navigation\/native';\n\nfunction HomeScreen() {\n  useFocusEffect(\n    useCallback(() => {\n      console.log('HomeScreen odakland\u0131 (focused)');\n      \/\/ Ekran her odakland\u0131\u011f\u0131nda yap\u0131lacak i\u015flemler (veri \u00e7ekme gibi)\n      return () => {\n        console.log('HomeScreen oda\u011f\u0131n\u0131 kaybetti (blurred)');\n        \/\/ Ekran oda\u011f\u0131n\u0131 kaybetti\u011finde temizleme i\u015flemleri\n      };\n    }, []) \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f b\u0131rak\u0131l\u0131rsa her odaklanmada \u00e7al\u0131\u015f\u0131r\n  );\n\n  return (\n    <View>\n      <Text>Ana Sayfa<\/Text>\n    <\/View>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Burada <code>useCallback<\/code> kullanmam\u0131z \u00f6nemlidir, \u00e7\u00fcnk\u00fc <code>useFocusEffect<\/code> fonksiyonunun her render'da yeniden olu\u015fturulmas\u0131n\u0131 engeller, b\u00f6ylece gereksiz yeniden \u00e7al\u0131\u015ft\u0131rmalar\u0131n \u00f6n\u00fcne ge\u00e7eriz. <code>useFocusEffect<\/code> sayesinde, bir kullan\u0131c\u0131n\u0131n belirli bir ekrana her d\u00f6nd\u00fc\u011f\u00fcnde g\u00fcncel verileri otomatik olarak y\u00fcklemesini sa\u011flayabilir veya o ekrana \u00f6zel animasyonlar\u0131 ba\u015flat\u0131p durdurabilirsiniz. Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan kritik olan veya her zaman en g\u00fcncel veriyi g\u00f6stermesi gereken ekranlar i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\n<p class=\"expert-tip\">\n  Uzman \u0130pucu: <code>useFocusEffect<\/code> i\u00e7inde ger\u00e7ekle\u015ftirdi\u011finiz abonelikleri veya zamanlay\u0131c\u0131lar\u0131, cleanup fonksiyonunda mutlaka temizleyin. Aksi takdirde, bellek s\u0131z\u0131nt\u0131lar\u0131 ya\u015fayabilir ve uygulaman\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131 bozabilirsiniz. \u00d6rne\u011fin, <code>setTimeout<\/code> veya <code>setInterval<\/code> kulland\u0131\u011f\u0131n\u0131zda, <code>clearTimeout<\/code> veya <code>clearInterval<\/code> ile temizlemeyi unutmay\u0131n.\n<\/p>\n<h2>Farkl\u0131 Navigat\u00f6r Tiplerinin Ya\u015fam D\u00f6ng\u00fcs\u00fcne Etkisi Nedir? (Stack, Tab, Drawer)<\/h2>\n<p>React Navigation, farkl\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc desenlerine uygun olarak Stack, Tab ve Drawer gibi \u00e7e\u015fitli navigat\u00f6r tipleri sunar. Her bir navigat\u00f6r\u00fcn, i\u00e7erdi\u011fi ekranlar\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc farkl\u0131 \u015fekillerde y\u00f6netmesi, geli\u015ftiricilerin dikkat etmesi gereken \u00f6nemli bir detayd\u0131r. Bu farkl\u0131l\u0131klar, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve bellek kullan\u0131m\u0131n\u0131 do\u011frudan etkileyebilir.<\/p>\n<h3>Stack Navigator'\u0131n Ya\u015fam D\u00f6ng\u00fcs\u00fc Yakla\u015f\u0131m\u0131<\/h3>\n<p>Stack Navigator, mobil uygulamalarda en s\u0131k kullan\u0131lan navigasyon desenidir. Yeni bir ekran a\u00e7t\u0131\u011f\u0131n\u0131zda, mevcut ekran\u0131n \u00fczerine itilir ve bir \"y\u0131\u011f\u0131n\" olu\u015fturulur. Bu y\u0131\u011f\u0131n yap\u0131s\u0131, ekranlar\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc \u00fczerinde belirgin bir etkiye sahiptir:<\/p>\n<ul>\n<li><strong>Mount\/Unmount:<\/strong> Stack Navigator'da bir ekran genellikle yaln\u0131zca ilk kez g\u00f6r\u00fcnt\u00fclendi\u011finde \"mount\" olur. Bir y\u0131\u011f\u0131n\u0131n \u00fczerine yeni bir ekran itildi\u011finde (<code>navigation.navigate()<\/code> veya <code>navigation.push()<\/code>), mevcut ekran \"unmount\" olmaz, sadece \"blur\" olur. Bu, kullan\u0131c\u0131n\u0131n geri d\u00fc\u011fmesine basarak \u00f6nceki ekrana d\u00f6nd\u00fc\u011f\u00fcnde ekran\u0131n daha h\u0131zl\u0131 g\u00f6r\u00fcnmesini sa\u011flar \u00e7\u00fcnk\u00fc bile\u015fenler zaten bellekte kalm\u0131\u015ft\u0131r. Bir ekran\u0131n ger\u00e7ekten \"unmount\" olmas\u0131 i\u00e7in, y\u0131\u011f\u0131ndan tamamen \u00e7\u0131kar\u0131lmas\u0131 gerekir (\u00f6rne\u011fin, <code>navigation.pop()<\/code> ile).<\/li>\n<li><strong>Focus\/Blur:<\/strong> Stack Navigator'da, y\u0131\u011f\u0131n\u0131n en \u00fcst\u00fcndeki ekran her zaman \"focused\" durumdad\u0131r. Yeni bir ekran itildi\u011finde, mevcut ekran \"blur\" olur ve yeni ekran \"focus\" olur. Geri gelindi\u011finde ise, eski ekran tekrar \"focus\" olur. Bu davran\u0131\u015f, <code>useFocusEffect<\/code> hook'unu kullanarak odaklanma an\u0131nda veri \u00e7ekme veya animasyon ba\u015flatma gibi i\u015flemler i\u00e7in idealdir.<\/li>\n<\/ul>\n<p>Bu yakla\u015f\u0131m, h\u0131zl\u0131 ge\u00e7i\u015fler i\u00e7in harika olsa da, e\u011fer y\u0131\u011f\u0131nda \u00e7ok fazla ve bellek yo\u011fun ekran varsa, uygulaman\u0131z\u0131n bellek t\u00fcketimi artabilir. Bu nedenle, y\u0131\u011f\u0131ndaki ekranlar\u0131n ne zaman ger\u00e7ekten serbest b\u0131rak\u0131lmas\u0131 gerekti\u011fini d\u00fc\u015f\u00fcnmek \u00f6nemlidir.<\/p>\n<h3>Tab Navigator'\u0131n Ya\u015fam D\u00f6ng\u00fcs\u00fc Yakla\u015f\u0131m\u0131<\/h3>\n<p>Tab Navigator, farkl\u0131 ana b\u00f6l\u00fcmlere h\u0131zl\u0131 eri\u015fim sa\u011flayan sekmeler sunar. Tab Navigator'\u0131n ekran ya\u015fam d\u00f6ng\u00fcs\u00fc \u00fczerindeki etkisi, Stack Navigator'dan biraz farkl\u0131d\u0131r ve yap\u0131land\u0131rmaya ba\u011fl\u0131 olarak de\u011fi\u015febilir:<\/p>\n<ul>\n<li><strong>Lazy Loading:<\/strong> Varsay\u0131lan olarak, Tab Navigator'daki sekmeler genellikle \"tembel y\u00fckleme\" (lazy loading) ile \u00e7al\u0131\u015f\u0131r. Yani, bir sekme yaln\u0131zca ilk kez se\u00e7ildi\u011finde \"mount\" olur. Bu, uygulaman\u0131n ba\u015flang\u0131\u00e7 performans\u0131n\u0131 art\u0131r\u0131r \u00e7\u00fcnk\u00fc t\u00fcm sekmeler ayn\u0131 anda y\u00fcklenmez.<\/li>\n<li><strong>Unmount Davran\u0131\u015f\u0131:<\/strong> Bir sekmeye ge\u00e7i\u015f yapt\u0131\u011f\u0131n\u0131zda, \u00f6nceki sekmenin i\u00e7indeki ekranlar genellikle \"unmount\" olmaz, sadece \"blur\" olur. Bu, kullan\u0131c\u0131n\u0131n sekmeler aras\u0131nda h\u0131zl\u0131ca ge\u00e7i\u015f yapabilmesini sa\u011flar. Ancak, baz\u0131 durumlarda (\u00f6rne\u011fin, belirli bir sekmeden \u00e7ok uzakla\u015f\u0131ld\u0131\u011f\u0131nda) Tab Navigator, performans amac\u0131yla baz\u0131 sekmeleri unmount etmeye karar verebilir. Bu davran\u0131\u015f\u0131 <code>unmountOnBlur<\/code> prop'u ile kontrol edebilirsiniz. E\u011fer <code>unmountOnBlur<\/code> de\u011feri <code>true<\/code> olarak ayarlan\u0131rsa, bir sekme oda\u011f\u0131n\u0131 kaybetti\u011finde i\u00e7indeki bile\u015fenler unmount edilir ve bir sonraki odaklanmada tekrar mount edilir.<\/li>\n<\/ul>\n<pre><code>\n<Tab.Navigator screenOptions={{ unmountOnBlur: true }}>\n  {\/* Sekmeleriniz *\/}\n<\/Tab.Navigator>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu, bellek t\u00fcketimini azaltmak i\u00e7in faydal\u0131 olabilir, ancak sekme ge\u00e7i\u015flerinde hafif bir gecikmeye neden olabilir.<\/p>\n<h3>Drawer Navigator'\u0131n Ya\u015fam D\u00f6ng\u00fcs\u00fc Yakla\u015f\u0131m\u0131<\/h3>\n<p>Drawer Navigator, genellikle uygulaman\u0131n ana b\u00f6l\u00fcmlerine eri\u015fim sa\u011flayan bir yan men\u00fcd\u00fcr. Ya\u015fam d\u00f6ng\u00fcs\u00fc a\u00e7\u0131s\u0131ndan Stack ve Tab Navigator aras\u0131nda bir denge sunar:<\/p>\n<ul>\n<li><strong>Lazy Loading\/Unmount:<\/strong> Drawer Navigator da genellikle tembel y\u00fckleme yapar; yani, bir men\u00fc \u00f6\u011fesi se\u00e7ilene kadar ilgili ekran mount edilmez. Stack Navigator gibi, bir men\u00fc \u00f6\u011fesi se\u00e7ildi\u011finde, genellikle \u00f6nceki ekran unmount olmaz, sadece blur olur. Ancak, Drawer Navigator i\u00e7indeki her men\u00fc \u00f6\u011fesi kendi i\u00e7inde bir Stack Navigator bar\u0131nd\u0131rd\u0131\u011f\u0131nda, bu i\u00e7 stack'lerin ya\u015fam d\u00f6ng\u00fcs\u00fc kurallar\u0131 ge\u00e7erli olur.<\/li>\n<\/ul>\n<p>\u00d6zetle, her navigat\u00f6r tipi ekran ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc farkl\u0131 \u015fekillerde y\u00f6netir. Performans ve bellek y\u00f6netimi i\u00e7in, uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na en uygun navigat\u00f6r tipini se\u00e7meli ve ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131n\u0131 dikkatlice takip etmelisiniz. \u00d6zellikle bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve gereksiz render i\u015flemlerini minimize etmek i\u00e7in bu farkl\u0131l\u0131klar\u0131 iyi anlamak kritik \u00f6neme sahiptir.<\/p>\n<h2>Performans Optimizasyonu: Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fc ile Bellek Y\u00f6netimi Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>React Native uygulamalar\u0131nda performans, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131ndan biridir. \u00d6zellikle navigasyon s\u0131ras\u0131nda ya\u015fanan yava\u015fl\u0131klar veya tak\u0131lmalar, kullan\u0131c\u0131lar\u0131 h\u0131zla uygulamadan so\u011futabilir. Navigasyon ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc do\u011fru bir \u015fekilde y\u00f6netmek, bellek optimizasyonu ve genel performans art\u0131\u015f\u0131 i\u00e7in kritik bir role sahiptir. Peki, bu optimizasyonu nas\u0131l sa\u011flar\u0131z?<\/p>\n<p>\u00d6ncelikle, React'in temel optimizasyon prensiplerini navigasyon ba\u011flam\u0131nda ele almal\u0131y\u0131z. Gereksiz yeniden render i\u015flemleri, uygulaman\u0131n performans\u0131n\u0131 ciddi \u015fekilde d\u00fc\u015f\u00fcrebilir. Bir ekran\u0131n oda\u011f\u0131n\u0131 kaybetmesi (blur olmas\u0131) veya navigasyon y\u0131\u011f\u0131n\u0131nda ba\u015fka bir ekran\u0131n alt\u0131na itilmesi durumunda bile, React genellikle bu ekran\u0131 bellekte tutar. E\u011fer bu ekranda karma\u015f\u0131k hesaplamalar, b\u00fcy\u00fck veri k\u00fcmeleri veya yo\u011fun DOM manip\u00fclasyonlar\u0131 varsa ve bu ekranlar s\u00fcrekli yeniden render oluyorsa, performans sorunlar\u0131 ka\u00e7\u0131n\u0131lmaz hale gelir.<\/p>\n<p>\u0130\u015fte navigasyon ya\u015fam d\u00f6ng\u00fcs\u00fc ile performans optimizasyonu i\u00e7in baz\u0131 stratejiler:<\/p>\n<h3>1. <code>React.memo<\/code> ve <code>useCallback<\/code>\/<code>useMemo<\/code> Kullan\u0131m\u0131<\/h3>\n<p>Bile\u015fenlerinizin gereksiz yere yeniden render olmas\u0131n\u0131 engellemek i\u00e7in React'in memoizasyon \u00f6zelliklerinden faydalan\u0131n. <code>React.memo<\/code>, bir bile\u015fenin prop'lar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece yeniden render olmas\u0131n\u0131 engeller. Karma\u015f\u0131k alt bile\u015fenleriniz i\u00e7in bunu kullanmak, navigasyon s\u0131ras\u0131nda performans kazan\u0131m\u0131 sa\u011flayabilir.<\/p>\n<pre><code>\nimport React, { memo } from 'react';\nimport { View, Text } from 'react-native';\n\nconst MemoizedHeavyComponent = memo(({ data }) => {\n  \/\/ Sadece 'data' de\u011fi\u015fti\u011finde yeniden render olur\n  console.log('Heavy Component Rendered');\n  return <View><Text>{data.length} elemanl\u0131 veri g\u00f6steriliyor<\/Text><\/View>;\n});\n\nfunction ParentScreen({ navigation }) {\n  const largeData = Array(1000).fill('item'); \/\/ B\u00fcy\u00fck bir veri seti\n\n  \/\/ E\u011fer ParentScreen yeniden render olursa, MemoizedHeavyComponent de render olabilir.\n  \/\/ Ancak e\u011fer prop'lar\u0131 (burada largeData) de\u011fi\u015fmezse, MemoizedHeavyComponent render olmaz.\n\n  return (\n    <View>\n      <Text>Parent Ekran\u0131<\/Text>\n      <MemoizedHeavyComponent data={largeData} \/>\n      <Button title=\"Ba\u015fka Ekrana Git\" onPress={() => navigation.navigate('AnotherScreen')} \/>\n    <\/View>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p><code>useCallback<\/code> ve <code>useMemo<\/code> ise fonksiyon ve de\u011ferlerin memoizasyonunu sa\u011flar. \u00d6zellikle alt bile\u015fenlere prop olarak fonksiyonlar veya objeler ge\u00e7iyorsan\u0131z, bu hook'lar\u0131 kullanarak referanslar\u0131n gereksiz yere de\u011fi\u015fmesini engelleyebilir ve <code>React.memo<\/code>'nun daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n<pre><code>\nimport React, { useCallback, useMemo, memo } from 'react';\n\/\/ ... di\u011fer import'lar ...\n\nconst MemoizedButton = memo(({ onPressHandler }) => {\n  console.log('Button Rendered');\n  return <Button title=\"Bas\" onPress={onPressHandler} \/>;\n});\n\nfunction MyScreen() {\n  const data = useMemo(() => computeHeavyData(), []); \/\/ Sadece bir kere hesaplan\u0131r\n\n  const handlePress = useCallback(() => {\n    console.log('D\u00fc\u011fmeye bas\u0131ld\u0131!');\n  }, []); \/\/ Sadece bir kere olu\u015fturulur\n\n  return (\n    <View>\n      <MemoizedButton onPressHandler={handlePress} \/>\n      {\/* ... *\/}\n    <\/View>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h3>2. Lazy Loading (Tembel Y\u00fckleme)<\/h3>\n<p>Baz\u0131 navigat\u00f6rler (\u00f6rne\u011fin Tab Navigator), varsay\u0131lan olarak tembel y\u00fckleme yapma yetene\u011fine sahiptir. Bu, bir sekmenin yaln\u0131zca kullan\u0131c\u0131 ilk kez o sekmeye ge\u00e7ti\u011finde y\u00fcklenmesi anlam\u0131na gelir. Stack Navigator i\u00e7in de kendi lazy loading mekanizmalar\u0131n\u0131z\u0131 uygulayabilirsiniz, \u00f6rne\u011fin, belirli bir ekran\u0131n yo\u011fun bile\u015fenlerini yaln\u0131zca ekrana odaklan\u0131ld\u0131\u011f\u0131nda y\u00fckleyerek.<\/p>\n<pre><code>\n\/\/ Tab Navigator i\u00e7in varsay\u0131lan tembel y\u00fckleme\n<Tab.Navigator>\n  <Tab.Screen name=\"Home\" component={HomeScreen} \/>\n  <Tab.Screen name=\"Settings\" component={SettingsScreen} \/> {\/* SettingsScreen sadece ilk kez se\u00e7ildi\u011finde y\u00fcklenir *\/}\n<\/Tab.Navigator>\n<\/pre>\n<p><\/code><\/p>\n<h3>3. <code>unmountOnBlur<\/code> Kullan\u0131m\u0131 (Tab Navigator i\u00e7in)<\/h3>\n<p>E\u011fer bir Tab Navigator kullan\u0131yorsan\u0131z ve her sekmenin bellek kullan\u0131m\u0131n\u0131 minimumda tutmak istiyorsan\u0131z, <code>unmountOnBlur<\/code> prop'unu <code>true<\/code> olarak ayarlayabilirsiniz. Bu, bir sekme oda\u011f\u0131n\u0131 kaybetti\u011finde i\u00e7indeki bile\u015fenlerin tamamen unmount edilmesini ve bir sonraki odaklanmada yeniden mount edilmesini sa\u011flar. Bu, daha yava\u015f ge\u00e7i\u015flere neden olabilir ancak bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve gereksiz bellek t\u00fcketimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n<h3>4. <code>useFocusEffect<\/code> ile Kaynaklar\u0131 Temizleme<\/h3>\n<p>Daha \u00f6nce bahsetti\u011fimiz gibi, <code>useFocusEffect<\/code> sadece odaklanma an\u0131nda kod \u00e7al\u0131\u015ft\u0131rmak i\u00e7in de\u011fil, ayn\u0131 zamanda ekran oda\u011f\u0131n\u0131 kaybetti\u011finde kaynaklar\u0131 temizlemek i\u00e7in de kritik \u00f6neme sahiptir. Abonelikleri iptal etmek, zamanlay\u0131c\u0131lar\u0131 temizlemek veya bellek yo\u011fun objeleri serbest b\u0131rakmak gibi i\u015flemler, <code>useFocusEffect<\/code>'in cleanup fonksiyonu i\u00e7inde yap\u0131lmal\u0131d\u0131r. Bu, \u00f6zellikle karma\u015f\u0131k animasyonlar, stream abonelikleri veya b\u00fcy\u00fck veri objeleri kullanan ekranlar i\u00e7in bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemenin en etkili yoludur.<\/p>\n<p class=\"expert-tip\">\n  Uzman \u0130pucu: Navigasyon a\u011fac\u0131n\u0131zda \u00e7ok say\u0131da ekran varsa ve hepsi bellekte tutuluyorsa, uygulaman\u0131z\u0131n bellek kullan\u0131m\u0131n\u0131 izlemek i\u00e7in React Native Debugger veya Flipper gibi ara\u00e7lar\u0131 kullan\u0131n. Bu ara\u00e7lar, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve gereksiz yeniden render i\u015flemlerini tespit etmenize yard\u0131mc\u0131 olacakt\u0131r.\n<\/p>\n<p>Bu stratejileri bir araya getirerek, React Native uygulaman\u0131z\u0131n navigasyon deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir, bellek kullan\u0131m\u0131n\u0131 optimize edebilir ve kullan\u0131c\u0131lara daha ak\u0131c\u0131 ve tepkisel bir aray\u00fcz sunabilirsiniz.<\/p>\n<h2>Vaka Analizi: Karma\u015f\u0131k Bir Senaryoda Navigasyon Sorunlar\u0131n\u0131 \u00c7\u00f6zmek<\/h2>\n<p>Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda navigasyon, genellikle basit <code>push<\/code> ve <code>pop<\/code> i\u015flemlerinden \u00e7ok daha karma\u015f\u0131kt\u0131r. Bu vaka analizinde, bir sosyal medya uygulamas\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir senaryoyu ele alacak ve navigasyon ya\u015fam d\u00f6ng\u00fcs\u00fc bilgilerimizi kullanarak olas\u0131 sorunlar\u0131 nas\u0131l \u00e7\u00f6zebilece\u011fimizi g\u00f6sterece\u011fiz.<\/p>\n<h3>Senaryo: Dinamik Profil Sayfas\u0131 ve Haber Ak\u0131\u015f\u0131 Entegrasyonu<\/h3>\n<p>Bir sosyal medya uygulaman\u0131z oldu\u011funu varsayal\u0131m. Uygulaman\u0131n ana ekran\u0131nda (<code>FeedScreen<\/code>) bir haber ak\u0131\u015f\u0131 var. Bu ak\u0131\u015ftaki her g\u00f6nderi, g\u00f6nderiyi payla\u015fan kullan\u0131c\u0131n\u0131n profil foto\u011fraf\u0131na t\u0131klanarak kullan\u0131c\u0131n\u0131n profil sayfas\u0131na (<code>ProfileScreen<\/code>) gitmenizi sa\u011fl\u0131yor. Ancak bu profil sayfas\u0131, a\u015fa\u011f\u0131daki gibi dinamik \u00f6zelliklere sahip:<\/p>\n<ol>\n<li>Profil sayfas\u0131, her ziyaret edildi\u011finde kullan\u0131c\u0131n\u0131n en g\u00fcncel g\u00f6nderilerini ve bilgilerini bir API'den \u00e7ekmeli.<\/li>\n<li>Profil sayfas\u0131nda, kullan\u0131c\u0131n\u0131n arkada\u015flar\u0131 listesini g\u00f6steren bir sekme (Tab Navigator i\u00e7inde) bulunuyor. Bu sekme, yaln\u0131zca ilk kez t\u0131kland\u0131\u011f\u0131nda arkada\u015f listesini \u00e7ekmeli ve daha sonra ayn\u0131 sekme tekrar ziyaret edildi\u011finde yeniden \u00e7ekmemeli (performans i\u00e7in).<\/li>\n<li>Kullan\u0131c\u0131 profil sayfas\u0131ndan ba\u015fka bir sayfaya (\u00f6rne\u011fin, bir arkada\u015f\u0131n\u0131n profiline) navigasyon yapt\u0131\u011f\u0131nda, ana profil sayfas\u0131ndaki belirli bir zamanlay\u0131c\u0131n\u0131n durdurulmas\u0131 gerekiyor.<\/li>\n<\/ol>\n<p>Bu senaryoda kar\u015f\u0131la\u015f\u0131labilecek potansiyel sorunlar \u015funlar olabilir:<\/p>\n<ul>\n<li>Profil sayfas\u0131na her d\u00f6nd\u00fc\u011f\u00fcm\u00fczde verinin eski kalmas\u0131 veya hi\u00e7 g\u00fcncellenmemesi.<\/li>\n<li>Profil sayfas\u0131n\u0131n her odakland\u0131\u011f\u0131nda gereksiz API \u00e7a\u011fr\u0131lar\u0131 yapmas\u0131, performans\u0131 d\u00fc\u015f\u00fcrmesi.<\/li>\n<li>Arkada\u015flar listesi sekmesinin her a\u00e7\u0131l\u0131\u015fta veriyi yeniden \u00e7ekmesi veya hi\u00e7 \u00e7ekmemesi.<\/li>\n<li>Zamanlay\u0131c\u0131n\u0131n arka planda \u00e7al\u0131\u015fmaya devam ederek bellek s\u0131z\u0131nt\u0131lar\u0131na veya beklenmedik davran\u0131\u015flara neden olmas\u0131.<\/li>\n<\/ul>\n<h3>\u00c7\u00f6z\u00fcm Yakla\u015f\u0131m\u0131 ve Uygulama<\/h3>\n<p>Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in React Navigation'\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc hook'lar\u0131n\u0131 ve React'in temel optimizasyonlar\u0131n\u0131 birle\u015ftirece\u011fiz.<\/p>\n<h4>1. G\u00fcncel Profil Verilerini Her Odaklanmada \u00c7ekme (<code>useFocusEffect<\/code>)<\/h4>\n<p>Profil sayfas\u0131n\u0131n her odakland\u0131\u011f\u0131nda g\u00fcncel veriyi \u00e7ekmesini sa\u011flamak i\u00e7in <code>useFocusEffect<\/code> kullanaca\u011f\u0131z. Bu, kullan\u0131c\u0131n\u0131n ana ak\u0131\u015ftan veya ba\u015fka bir profilden kendi profiline d\u00f6nd\u00fc\u011f\u00fcnde her zaman en yeni bilgiyi g\u00f6rmesini garanti eder.<\/p>\n<pre><code>\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { View, Text, ActivityIndicator } from 'react-native';\nimport { useFocusEffect } from '@react-navigation\/native';\nimport axios from 'axios'; \/\/ API \u00e7a\u011fr\u0131s\u0131 i\u00e7in\n\nfunction ProfileScreen({ route, navigation }) {\n  const { userId } = route.params;\n  const [profileData, setProfileData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  \/\/ Profil verilerini \u00e7eken fonksiyon\n  const fetchProfileData = async () => {\n    setLoading(true);\n    try {\n      const response = await axios.get(<code>https:\/\/api.myapp.com\/users\/${userId}<\/code>);\n      setProfileData(response.data);\n    } catch (error) {\n      console.error(\"Profil verisi \u00e7ekilemedi:\", error);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  \/\/ Ekran her odakland\u0131\u011f\u0131nda profil verisini \u00e7ek\n  useFocusEffect(\n    useCallback(() => {\n      fetchProfileData();\n      console.log(<code>Profil Ekran\u0131 (ID: ${userId}) odakland\u0131. Veri yenileniyor.<\/code>);\n\n      \/\/ Zamanlay\u0131c\u0131y\u0131 ba\u015flat\n      const timer = setInterval(() => {\n        console.log(\"Profil Ekran\u0131 aktif, zamanlay\u0131c\u0131 \u00e7al\u0131\u015f\u0131yor...\");\n      }, 5000);\n\n      return () => {\n        console.log(<code>Profil Ekran\u0131 (ID: ${userId}) oda\u011f\u0131n\u0131 kaybetti. Zamanlay\u0131c\u0131 durduruluyor.<\/code>);\n        clearInterval(timer); \/\/ Ekran oda\u011f\u0131n\u0131 kaybetti\u011finde zamanlay\u0131c\u0131y\u0131 durdur\n      };\n    }, [userId]) \/\/ userId de\u011fi\u015firse effect yeniden \u00e7al\u0131\u015f\u0131r\n  );\n\n  if (loading) {\n    return <ActivityIndicator size=\"large\" color=\"#0000ff\" style={{ flex: 1, justifyContent: 'center' }} \/>;\n  }\n\n  return (\n    <View style={{ flex: 1, padding: 20 }}>\n      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>{profileData?.name}<\/Text>\n      <Text style={{ fontSize: 16, marginVertical: 10 }}>{profileData?.bio}<\/Text>\n      {\/* Di\u011fer profil bile\u015fenleri *\/}\n    <\/View>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>2. Arkada\u015f Listesi Sekmesini Tembel Y\u00fckleme (<code>Tab.Screen<\/code> ve <code>unmountOnBlur<\/code>)<\/h4>\n<p>Arkada\u015flar listesi sekmesinin sadece ilk kez t\u0131kland\u0131\u011f\u0131nda y\u00fcklenmesini ve performans i\u00e7in her tekrar ziyaret edildi\u011finde yeniden \u00e7ekilmemesini istiyoruz. Burada Tab Navigator'\u0131n varsay\u0131lan tembel y\u00fckleme \u00f6zelli\u011fi ve <code>useEffect<\/code>'in do\u011fru kullan\u0131m\u0131 i\u015fimize yarayacak. E\u011fer bellekten tamamen temizlenmesini istersek, <code>unmountOnBlur<\/code> kullanabiliriz.<\/p>\n<pre><code>\n\/\/ ProfileScreen i\u00e7indeki Tab Navigator\nimport { createMaterialTopTabNavigator } from '@react-navigation\/material-top-tabs';\n\nconst Tab = createMaterialTopTabNavigator();\n\nfunction ProfileTabs({ userId }) {\n  return (\n    <Tab.Navigator\n      initialRouteName=\"Posts\"\n      screenOptions={{\n        \/\/ Arkada\u015f listesi sekmesinin her blur oldu\u011funda unmount edilmesini istemiyoruz,\n        \/\/ sadece ilk y\u00fcklendi\u011finde veriyi \u00e7ekmesini istiyoruz.\n        \/\/ unmountOnBlur: false veya varsay\u0131lan b\u0131rak\u0131n\n      }}\n    >\n      <Tab.Screen name=\"Posts\">\n        {props => <UserPostsScreen {...props} userId={userId} \/>}\n      <\/Tab.Screen>\n      <Tab.Screen name=\"Friends\">\n        {props => <FriendsListScreen {...props} userId={userId} \/>}\n      <\/Tab.Screen>\n    <\/Tab.Navigator>\n  );\n}\n\n\/\/ FriendsListScreen bile\u015feni\nfunction FriendsListScreen({ userId }) {\n  const [friends, setFriends] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    \/\/ Bu kod sadece bile\u015fen mount edildi\u011finde \u00e7al\u0131\u015f\u0131r.\n    \/\/ Yani, sekme ilk kez se\u00e7ildi\u011finde veri \u00e7ekilir.\n    const fetchFriends = async () => {\n      setLoading(true);\n      try {\n        const response = await axios.get(<code>https:\/\/api.myapp.com\/users\/${userId}\/friends<\/code>);\n        setFriends(response.data);\n      } catch (error) {\n        console.error(\"Arkada\u015flar listesi \u00e7ekilemedi:\", error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchFriends();\n    console.log(<code>Arkada\u015flar Listesi Ekran\u0131 (ID: ${userId}) mount edildi. Veri \u00e7ekiliyor.<\/code>);\n\n    return () => {\n      console.log(<code>Arkada\u015flar Listesi Ekran\u0131 (ID: ${userId}) unmount edildi.<\/code>);\n      \/\/ Temizleme i\u015flemleri\n    };\n  }, [userId]); \/\/ userId de\u011fi\u015firse yeniden y\u00fcklenir\n\n  if (loading) {\n    return <ActivityIndicator size=\"small\" color=\"#00ff00\" \/>;\n  }\n\n  return (\n    <View style={{ flex: 1, padding: 10 }}>\n      <Text style={{ fontSize: 18, marginBottom: 10 }}>Arkada\u015flar ({friends.length})<\/Text>\n      {friends.map(friend => <Text key={friend.id}>{friend.name}<\/Text>)}\n    <\/View>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu vaka analizinde g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, React Navigation'\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc hook'lar\u0131n\u0131 ve React'in temel hook'lar\u0131n\u0131 do\u011fru yerlerde kullanarak, dinamik ve karma\u015f\u0131k navigasyon senaryolar\u0131nda dahi tutarl\u0131, performansl\u0131 ve hatas\u0131z uygulamalar geli\u015ftirmek m\u00fcmk\u00fcnd\u00fcr. <code>useFocusEffect<\/code> ile dinamik veri y\u00fcklemeyi, <code>useEffect<\/code> ile tek seferlik veri \u00e7ekmeyi ve cleanup i\u015flemlerini birle\u015ftirerek uygulaman\u0131z\u0131n kontrol\u00fcn\u00fc ele alabilirsiniz.<\/p>\n<h2>Sonu\u00e7: \u00d6\u011frendiklerimizi \u00d6zetleyelim ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>React Native navigasyon ya\u015fam d\u00f6ng\u00fcs\u00fc, uygulaman\u0131z\u0131n kalbinde yer alan ve kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir konudur. Bu rehber boyunca, React Navigation'\u0131n temelden ileri seviyeye kadar olan mekanizmalar\u0131n\u0131, ekranlar\u0131n \"mount\", \"unmount\", \"focus\" ve \"blur\" durumlar\u0131n\u0131 nas\u0131l y\u00f6netti\u011fini, farkl\u0131 navigat\u00f6r tiplerinin (Stack, Tab, Drawer) bu durumlara nas\u0131l etki etti\u011fini ve performans\u0131 optimize etmek i\u00e7in hangi stratejileri kullanabilece\u011fimizi detayl\u0131ca inceledik. \u00d6zellikle <code>useFocusEffect<\/code> gibi \u00f6zel hook'lar sayesinde, ekran odaklanmas\u0131 ve oda\u011f\u0131n\u0131 kaybetme anlar\u0131nda hassas i\u015flemler ger\u00e7ekle\u015ftirebilece\u011fimizi ve gereksiz bellek t\u00fcketimini \u00f6nleyebilece\u011fimizi g\u00f6rd\u00fck.<\/p>\n<p>Unutmay\u0131n ki, her bir ekran\u0131n\u0131z\u0131n hangi navigat\u00f6r i\u00e7inde bulundu\u011funu ve bu navigat\u00f6r\u00fcn ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc nas\u0131l y\u00f6netti\u011fini anlamak, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 engellemek, API \u00e7a\u011fr\u0131lar\u0131n\u0131 do\u011fru zamanda yapmak ve genel uygulama performans\u0131n\u0131 art\u0131rmak i\u00e7in elzemdir. <code>React.memo<\/code>, <code>useCallback<\/code>, <code>useMemo<\/code> gibi React optimizasyon ara\u00e7lar\u0131n\u0131 navigasyonla birle\u015ftirmek, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda g\u00f6zle g\u00f6r\u00fcl\u00fcr iyile\u015fmeler sa\u011flayacakt\u0131r. Ger\u00e7ek d\u00fcnya vaka analizimizle de, bu teorik bilgileri pratik senaryolara nas\u0131l uygulayabilece\u011fimizi g\u00f6stermi\u015f olduk.<\/p>\n<p>Art\u0131k React Native navigasyon ya\u015fam d\u00f6ng\u00fcs\u00fcne dair derinlemesine bir anlay\u0131\u015fa sahip oldu\u011funuza g\u00f6re, daha sa\u011flam, h\u0131zl\u0131 ve kullan\u0131c\u0131 dostu mobil uygulamalar geli\u015ftirmek i\u00e7in gerekli ara\u00e7lara sahipsiniz. Bu bilgilerle, uygulaman\u0131z\u0131n navigasyon ak\u0131\u015f\u0131n\u0131 daha bilin\u00e7li bir \u015fekilde tasarlayabilir ve olas\u0131 performans sorunlar\u0131n\u0131 proaktif bir yakla\u015f\u0131mla \u00e7\u00f6zebilirsiniz. Geli\u015ftirmeye devam edin!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<dl>\n<dt>Ekran\u0131m neden her geri geldi\u011fimde yeniden render oluyor?<\/dt>\n<dd>\n    Bir Stack Navigator kullan\u0131yorsan\u0131z, \u00f6nceki ekran\u0131n\u0131z yeni bir ekran itildi\u011finde genellikle unmount olmaz, sadece oda\u011f\u0131n\u0131 kaybeder (blur). Geri geldi\u011finizde, zaten bellekte olan bu ekran tekrar odaklan\u0131r (focus). E\u011fer ekran\u0131n\u0131zdaki veriler veya UI elemanlar\u0131 her odaklanmada g\u00fcncelleniyorsa ve bu g\u00fcncellemeler bir state de\u011fi\u015fimi tetikliyorsa, React do\u011fal olarak bile\u015feni yeniden render edecektir. Bunu engellemek i\u00e7in <code>React.memo<\/code> ve <code>useCallback<\/code>\/<code>useMemo<\/code> kullanarak gereksiz yeniden render i\u015flemlerini azaltabilirsiniz. Ayr\u0131ca, <code>useFocusEffect<\/code> i\u00e7indeki <code>cleanup<\/code> fonksiyonunda state'i s\u0131f\u0131rlamak da yard\u0131mc\u0131 olabilir.\n  <\/dd>\n<dt>\u0130ki ekran aras\u0131nda nas\u0131l veri aktar\u0131r\u0131m?<\/dt>\n<dd>\n    React Navigation'da ekranlar aras\u0131 veri aktar\u0131m\u0131n\u0131n birka\u00e7 yolu vard\u0131r:<\/p>\n<ul>\n<li><strong>Route Parametleri:<\/strong> En yayg\u0131n y\u00f6ntemdir. <code>navigation.navigate(&#039;ScreenName&#039;, { param1: &#039;value&#039; })<\/code> ile veri g\u00f6nderip, hedef ekranda <code>route.params.param1<\/code> ile eri\u015febilirsiniz.<\/li>\n<li><strong>Global Durum Y\u00f6netimi:<\/strong> Context API, Redux, Zustand gibi k\u00fct\u00fcphanelerle global bir durum olu\u015fturarak, ekranlar aras\u0131nda karma\u015f\u0131k veya s\u0131k kullan\u0131lan verileri payla\u015fabilirsiniz.<\/li>\n<li><strong>Event Emitter:<\/strong> Daha spesifik ve nadir durumlarda, <code>EventEmitter<\/code> kullanarak ekranlar aras\u0131nda \u00f6zel olaylar tetikleyebilir ve dinleyebilirsiniz.<\/li>\n<\/ul>\n<\/dd>\n<dt>React Navigation'da bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 nas\u0131l \u00f6nlerim?<\/dt>\n<dd>\n    Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in birka\u00e7 temel kurala uyman\u0131z \u00f6nemlidir:<\/p>\n<ul>\n<li><strong>Abonelikleri Temizle:<\/strong> <code>useEffect<\/code> veya <code>useFocusEffect<\/code> i\u00e7inde ba\u015flatt\u0131\u011f\u0131n\u0131z t\u00fcm abonelikleri (\u00f6rne\u011fin WebSocket ba\u011flant\u0131lar\u0131, event listener'lar) veya zamanlay\u0131c\u0131lar\u0131 (<code>setTimeout<\/code>, <code>setInterval<\/code>) mutlaka <code>cleanup<\/code> fonksiyonunda temizleyin.<\/li>\n<li><strong>Referanslar\u0131 Serbest B\u0131rak:<\/strong> Gereksiz yere b\u00fcy\u00fck objeleri state'te veya ref'te tutmaktan ka\u00e7\u0131n\u0131n. Ekran unmount oldu\u011funda veya oda\u011f\u0131n\u0131 kaybetti\u011finde, art\u0131k ihtiya\u00e7 duyulmayan referanslar\u0131 null'a e\u015fitleyerek serbest b\u0131rak\u0131n.<\/li>\n<li><strong><code>unmountOnBlur<\/code> Kullan\u0131m\u0131:<\/strong> Tab Navigator kullan\u0131yorsan\u0131z ve her sekme i\u00e7in bellek t\u00fcketimi kritikse, <code>unmountOnBlur<\/code> prop'unu <code>true<\/code> olarak ayarlayarak, oda\u011f\u0131n\u0131 kaybeden sekmelerin tamamen bellekten kald\u0131r\u0131lmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/li>\n<\/ul>\n<\/dd>\n<dt><code>useEffect<\/code> ve <code>useFocusEffect<\/code> aras\u0131ndaki temel fark nedir?<\/dt>\n<dd>\n    Temel fark, <code>useEffect<\/code>'in bile\u015fenin mount edilmesi ve unmount edilmesiyle, <code>useFocusEffect<\/code>'in ise ekran\u0131n navigasyon ba\u011flam\u0131nda odaklanmas\u0131 (focus) ve oda\u011f\u0131n\u0131 kaybetmesi (blur) ile ilgili olmas\u0131d\u0131r.<\/p>\n<ul>\n<li><strong><code>useEffect<\/code>:<\/strong> Bile\u015fen DOM'a ilk kez eklendi\u011finde (mount) \u00e7al\u0131\u015f\u0131r ve DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount) temizleme fonksiyonunu \u00e7al\u0131\u015ft\u0131r\u0131r. Bir ekran bir Stack Navigator'da arka plana itildi\u011finde <code>unmount<\/code> olmaz, bu y\u00fczden <code>useEffect<\/code> tekrar \u00e7al\u0131\u015fmaz.<\/li>\n<li><strong><code>useFocusEffect<\/code>:<\/strong> Ekran\u0131n navigasyon y\u0131\u011f\u0131n\u0131nda en \u00fcstte (focused) oldu\u011fu her an \u00e7al\u0131\u015f\u0131r. Ekran oda\u011f\u0131n\u0131 kaybetti\u011finde (blurred) veya tamamen kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmounted) temizleme fonksiyonu \u00e7al\u0131\u015f\u0131r. Bu, \u00f6zellikle her ziyaret edildi\u011finde g\u00fcncel veri \u00e7ekilmesi gereken ekranlar i\u00e7in idealdir.<\/li>\n<\/ul>\n<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz?&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-34326","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber<\/title>\n<meta name=\"description\" content=\"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation&#039;\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation&#039;\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-15T03:00:56+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-11-15T03:00:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\"},\"wordCount\":3995,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\",\"name\":\"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-15T03:00:56+00:00\",\"description\":\"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation'\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber","description":"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation'\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber","og_description":"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation'\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-15T03:00:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber","datePublished":"2025-11-15T03:00:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/"},"wordCount":3995,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/","name":"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-15T03:00:56+00:00","description":"React Native uygulaman\u0131zda navigasyonun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ekranlar aras\u0131 ge\u00e7i\u015flerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve performans \u00fczerindeki etkilerini merak ediyor musunuz? Bu rehber, React Navigation'\u0131n derinliklerine inerek uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ipu\u00e7lar\u0131 sunuyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-native-navigasyon-yasam-dongusunu-anlamak-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Native Navigasyon Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Anlamak: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34326"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34326\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}