React Navigation kitaplığını kullanarak React Native uygulamanız için nasıl sağlam bir navigasyon sistemi oluşturabileceğinizi öğrenin.

Mobil uygulamalar, kullanıcıları çeşitli ekranlar ve işlevler aracılığıyla zahmetsizce yönlendiren bir navigasyon sistemine sahip olmalıdır.

React Native için güçlü ve esnek bir gezinme kitaplığı olan React Navigation, bu deneyimi yaratmanıza yardımcı olabilir. Yeteneklerinden yararlanarak, zahmetsizce harika bir mobil navigasyon sistemi oluşturabilirsiniz.

React Navigation Library'yi Kurma

React Navigation, bir navigasyon sistemi oluşturmak için Yığın, Sekme ve Çekmece navigasyonu olmak üzere üç ana gezinme modeli sunar. Bu gezinme kalıpları, uygulamanızdaki farklı ekranlar arasında gezinmeyi düzenlemek ve yönetmek için bir çerçeve sağlar.

React Navigation'ı kullanmaya başlamak için kitaplığı ve gerekli bağımlılıklarını kurun:

npm install @react-navigation/native
npm install tepki-yerel-ekranlar tepki-yerel-güvenli-alan-bağlam

Gezgin Kurma

React Navigation içindeki her gezgin kendi ayrı kitaplığında yaşar. Gezginlerden herhangi birini kullanmak için bunları ayrı ayrı yüklemeniz gerekir.

İyi düşünülmüş bir proje yapısı, mobil uygulamanız için bir navigasyon sistemi oluştururken kullanışlıdır. İyi bir uygulama, bir kaynak projenizin kök dizinindeki klasör. Bu klasörün içinde bir ekranlar dosya. Bu, ekran bileşenlerinizi diğer bileşenlerden ayırmaya hizmet edecektir.

Projenizin içinde kullandığınız gezinme modelini ayarlamak için kodu yazacaksınız. Uygulama.js dosya.

İçinde bir Navigatör oluşturma Uygulama.js file birkaç nedenden dolayı en iyi uygulamadır:

  • bu Uygulama.js file, genellikle bir React Native uygulamasındaki en üst düzey bileşendir. Gezgini bu dosyada tanımlamak, gezinme hiyerarşisinin bileşen ağacınızın en yüksek seviyesinde olmasını ve baştan sona erişilebilir olmasını sağlayacaktır.
  • Navigatörü şuraya yerleştirme Uygulama.js file, uygulama genelindeki duruma ve aksesuarlara kolayca erişmenizi ve bunları gezgin içindeki ekranlara aktarmanızı sağlar.
  • React Navigation'lar NavigasyonKapsayıcısı gezinme için gerekli bağlamı sağlar ve genellikle içinde bulunur Uygulama.js. Navigator'ı aynı dosyaya yerleştirerek, onu kolayca entegre edebilirsiniz. NavigasyonKapsayıcısı.

Yığın Gezgini

Stack Navigator, React Navigation kitaplığındaki en popüler gezinme modelidir. Her ekranın tamamen farklı bir bileşen olduğu ve bir öncekinin üzerine yığıldığı bir yığın veri yapısı kullanır.

Yığının üstüne yeni bir ekran itildiğinde, aktif ekran haline gelir ve önceki ekran onun altına atılır. Bu, kullanıcıların bir web sitesinin gezinme akışı gibi yığın içinde ileri geri gezinmesine olanak tanır. Yapabilirsiniz yığın gezginini bir ekrandan diğerine geçiş yapacak şekilde ayarlayın.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { NavigationContainer } itibaren"@react-navigation/yerel";
içe aktarmak { createStackNavigator } itibaren"@react-navigation/yığın";
// Ekran bileşenlerinizi içe aktarın
içe aktarmak Ana ekran itibaren'./screens/Ana Ekran';
içe aktarmak AyrıntılarEkranı itibaren'./screens/DetailsScreen';


sabit Yığın = createStackNavigator();


sabit uygulama = () => {
geri dönmek (


"Ev" bileşen={Ana Ekran} />
"Detaylar" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
ihracatvarsayılan Uygulama;

Yukarıdaki kod bloğu, kullanarak bir Stack Navigator bileşeni oluşturur. createStackNavigator() gezinti kitaplığından.

Bu örnekte, Yığın Gezgini'nin iki ekranı vardır: Ev Ve Detaylar.

Şimdi Stack Navigator'ı kurun:

npm install @react-navigation/stack

İçeri Ana ekran, kullanabilirsiniz navigasyon Stack Navigator'ı test etmek için nesne:

içe aktarmak { StyleSheet, Görünüm, Düğme } itibaren"tepki-yerli";
içe aktarmak Tepki itibaren"tepki";
sabit Ana Ekran = ({ gezinme }) => {
geri dönmek (

 başlık="Şu yöne rotayı ayarla .."
 onPress={() => navigasyon.navigate("Detay Ekranı")}
 />
 </View>
 );
};


ihracatvarsayılan Ana ekran;
sabit stiller = StyleSheet.create({});
2 Resim

Stack Navigator'ın önceki ekranlara geri gitmek için nasıl otomatik olarak bir ok düğmesi oluşturduğuna dikkat edin.

Sekme Gezgini

Bazı durumlarda, Stack Navigator gibi bir ileri geri gezinme sistemine sahip olmak harika bir deneyim sağlamaz. Bir Sekme Gezgini bu durumlar için daha uygundur. Kullanıcıya önceden sunulan navigasyon ekranlarını gösterir ve kullanımı daha kolay olabilir, bir web gezinme çubuğu gibi.

Başlamak için @react-navigation/bottom-tabs kitaplık kullanarak NPM paket yöneticisi.

İle createBottomNavigator(), Stack Navigator ile yaptığınız gibi Sekme Gezgini'nin bir örneğini oluşturabilirsiniz:

içe aktarmak { createBottomTabNavigator } itibaren"@react-navigation/bottom-tabs";
sabit Sekme = createBottomTabNavigator();

Ardından, gezgin içinde istediğiniz ekranları sekmeler olarak tanımlayın ve NavigasyonKapsayıcısı:

ihracatvarsayılanişlevUygulama() {
geri dönmek (


 isim="Ev"
 bileşen={Ana Ekran}
 seçenekler={{ başlık: "Ev" }}
 />
 isim="Profil"
 bileşen={ProfilEkranı}
 seçenekler={{ başlık: "Profil" }}
 />
 isim="Detaylar"
 bileşen={DetailScreen}
 seçenekler={{ başlık: "Detaylar" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Uygulamanızı çalıştırırken, altta tanımlı ekranlarınızla bir Sekme Gezgini görmelisiniz.

3 Resim

kullanabilirsin tabBarPozisyonu oNavigatörü şuraya konumlandırma seçeneği tepe, Sağ, sol, veya alt (varsayılan).

Çekmece Gezgini

Çekmece Gezginleri veya çekmeceler, mobil uygulamalarda yaygın bir gezinme modelidir. Çekmeceleri kaydırarak veya bir düğmeye dokunarak açabilirsiniz. Bu, çekmecenin ekranın yanından içeri doğru kaymasına ve içindekilerin açığa çıkmasına neden olur.

2 Resim

Drawer Navigator'ı kullanmak için, onunla birlikte kurun. tepki-yerel-jest-işleyici Ve tepki-yerli-yeniden canlandırılmış:

npm install @react-navigation/drawer
npm install tepki-yerel-jest-işleyici tepki-yerel-yeniden canlandırıldı

Ayrıca içinde yeniden canlandırılmış yapılandırmanız gerekecek babel.config.js dosya:

modül.ihracat = {
 ön ayarlar: ["babel-preset-expo"],
 eklentiler: ["react-native-reanimated/plugin"],
};

İşte bir Çekmece Gezgini'nin nasıl kurulacağına dair bir örnek:

içe aktarmak"react-native-jest-handler"; // Bu import en üstte olmalı
içe aktarmak { Görünüm, Metin, Düğme } itibaren"tepki-yerli";
içe aktarmak { createDrawerNavigator } itibaren"@react-navigation/drawer";
içe aktarmak { NavigationContainer } itibaren"@react-navigation/yerel";


sabit Çekmece = createDrawerNavigator();


sabit Çekmece İçeriği = ({ gezinme }) => {
geri dönmek (
esnek: 1, hizalamaÖğeleri: "merkez", içeriği haklı çıkarmak: "merkez" }}>
yazı Boyutu: 24, yazı tipiAğırlığı: "gözü pek" }}>
 Çekmeceye Hoş Geldiniz
 </Text>

 Bu, görüntüleyebileceğiniz bazı ekstra içeriklerdir. içinde Çekmece.
 </Text>


sabit uygulama = () => (

 ilkRotaAdı="Ev"
 çekmeceİçeriği={(sahne) => <Çekmece İçeriği {...sahne} />}
 >
 {/* Diğer ekranlarınız burada */}
 </Drawer.Navigator>
 </NavigationContainer>
);
ihracatvarsayılan Uygulama;

Bu örnekte, Çekmece İçeriği bileşen olarak geçirilir çekmece içeriği desteklemek oluşturDrawerNavigator. İçinde Çekmece İçeriği bileşeni, metin bileşenlerini veya diğer öğeleri ve stili kullanarak içeriği istenen bilgileri gösterecek şekilde özelleştirebilirsiniz.

Sekme gezginleri statiktir ve her zaman görünür durumdadır. Sekmeler ekranın bazı kısımlarını engellediğinden ve odağı ana ekrandan uzaklaştırabileceğinden, bu her zaman en iyisi değildir. Çekmeceleri dinamik bir sekme gezgini olarak kullanabilir ve çekmeceler içinde bir gezinme menüsü oluşturabilirsiniz. Kullanıcılar daha sonra bir gezinme menüsü bulmak için çekmeceyi açabilir.

Çekmeceyi arama çubuğu, kullanıcı profili, bağlamsal bilgiler veya tam ekran görünümü gerektirmeyen herhangi bir ek içeriği görüntülemek için de kullanabilirsiniz.

Drawer Navigator'dan en iyi şekilde yararlanmak için şu en iyi uygulamaları göz önünde bulundurun:

  • Çekmeceyi çok fazla seçenekle boğmaktan kaçının ve en alakalı ve sık kullanılan özellikleri sunmaya odaklanın.
  • Kullanıcıların aradıklarını hızlı bir şekilde bulmalarına yardımcı olmak için ilgili öğeleri mantıksal ve sezgisel olarak kategorilere ayırın.
  • Kullanıcıların çekmecedeki her öğenin amacını anlamasına yardımcı olmak için simgeler veya görsel göstergeler kullanın.

Navigasyon Destekleriyle Veri Aktarma

React Navigation, verileri gezinti desteklerinden geçirmenize izin veren güçlü bir mekanizma sağlar.

Bir ekranda bir öğe listenizin olduğu ve bir kullanıcı bir öğeyi seçtiğinde, karşılık gelen verileri başka bir ekrana geçirmek istediğiniz bir senaryo düşünün.

İlk olarak, gezinme yapınızı tanımlamanız gerekir. Şimdi, verileri aktarmak için Ana ekran bir DetayEkran bir öğe seçildiğinde, içeride Ana ekran gezinmeyi yöneten ve iletmek istediğiniz verileri içeren bir işlev tanımlayın.

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Görünüm, Metin, Düğme } itibaren"tepki-yerli";
sabit Ana Ekran = ({ gezinme }) => {
sabit handleItemPress = (öğe) => {
 navigasyon.navigate("Ayrıntı Ekranı", { öğe });
 };


geri dönmek (

Liste ile ilgili Öğeler</Text>
ihracatvarsayılan Ana ekran;

bu işlemeItemPress işlevi kullanır navigasyon.navigate gezinme yöntemi DetayEkran seçilen öğe verilerini ikinci bağımsız değişkende bir parametre olarak geçirirken.

İçeriden aktarılan verilere erişebilmek için DetayEkran bileşene ihtiyacınız olacak navigasyon destek:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Görünüm, Metin } itibaren"tepki-yerli";
sabit Detay Ekranı = ({ gezinme }) => {
sabit öğe = navigasyon.getParam('öğe', '');


geri dönmek (

Detay Ekranı</Text>
{öğe}</Text>
 </View>
 );
};
ihracatvarsayılan Detay Ekranı;

Burada, DetayEkran bileşen kullanımları navigasyon.getParam geçirilen öğeyi navigasyon donanımlarından almak için. Bu örnekte, verilerin mevcut olmaması durumunda boş bir dizenin varsayılan değeri ayarlanır. Bu şekilde, uygulamanız oluşturulurken çökmez.

Uygulamanızın karmaşıklığına bağlı olarak, Redux gibi durum yönetimi kitaplıklarını kullanarak keşfedebilirsiniz veya verileri küresel olarak yönetmek ve paylaşmak için bağlam API'sı.

Navigasyon Kodunuzu Düzenleme

Gezinme kodunuzu düzgün bir şekilde düzenlemek, ölçeklenebilir ve işbirliğine dayalı bir React Native uygulaması oluşturmanıza yardımcı olacaktır. Bunu, gezinme mantığını yönetilebilir modüllere bölerek yapabilirsiniz. Bu, okumayı ve anlamayı kolaylaştıracaktır.

Bununla, geliştirme deneyiminin keyfini çıkarırken kullanıcılarınız için sorunsuz gezinme oluşturacağınızdan emin olabilirsiniz.