Bir yığın gezgini kullanmak, uygulamanızın minimum kodla bir ekrandan diğerine geçişine yardımcı olabilir.

Çoğu zaman, bir React Native uygulaması oluştururken, onu Login, Home ve About gibi farklı ekranlardan oluşturursunuz. Ardından, kullanıcılarınızın uygulamada gezinebilmesi ve ayrı ekranlarına doğru sırayla erişebilmesi için bir gezinme mekanizması uygulamanız gerekir.

Bu öğreticinin amacı, React Native uygulamanızda bir navigasyon sistemi kurma sürecinde size yol göstermektir. Bu, kitaplığın kurulmasını, ekranlarınızın yığın gezginine eklenmesini ve bileşenlerinizin her birinden ekranların birbirine bağlanmasını içerir.

Sen başlamadan önce

Bu öğreticiyi yerel bilgisayarınızda takip etmek için aşağıdakilerin kurulu olması gerekir:

  • Node.js v10 veya üstü
  • xcode veya Android Stüdyosu (emülatörü çalıştırmak için ayarlanmış)
  • Yerel CLI'yı Tepki

React Native geliştirme ortamınızı nasıl kuracağınızla ilgili adım adım talimatlar için şu makaleyi okuyabilirsiniz: resmi Tepki Yerli kurulum belgeleri.

instagram viewer

React Native uygulamamızda navigasyonu nasıl uygulayacağımıza bakmaya başlamadan önce, yığın navigasyon mekanizmasının React Native'de nasıl çalıştığını anlayalım.

Yığın Gezinmesinin Nasıl Çalıştığını Anlamak

React Native uygulamanızın bir yığın olduğunu hayal edin. Başlangıçta, bu yığında, sahip olduğunuz Ev, uygulamayı açtığınızda gösterilen ilk ekrandır.

Eğer Hakkında gelen ekran Ev ekran, uygulama iterdi Hakkında yığının üzerine, böylece üstüne oturur Ev. Benzer şekilde uygulama, gittiğiniz her yeni ekranı yığına iter.

Şimdi, önceki ekrana geri dönmek isterseniz, uygulama mevcut ekranınızı yığından çıkarır ve size onun altındaki ekranı gösterir. Bu davranış, web tarayıcınızdaki "geri" simgesini tıkladığınızda olana benzer.

Yığın gezinme mekanizmasını net bir şekilde anladıktan sonra, şimdi onu bir React Native uygulamasında kurmanın zamanı geldi.

1. Yerel Uygulamalar için React Navigation'ı Kurun

Başlamak için Gezinme paketine tepki ver Bu komutu bir terminalde yürüterek React Native projenizdeki yerel uygulamalar için:

npm ben @tepki-navigasyon/yerli

Az önce kurduğunuz paket şunları gerektirir: Yerel Yığına Tepki Ver Ve Yerel Ekranlara Tepki düzgün çalıştırmak için. RN Stack'i yüklemek için şunu çalıştırın:

npm ben @tepki-navigasyon/yerli-yığın

İkinciyi yüklemek için şunu çalıştırın:

npm tepki-yerli-ekranlar

Artık uygulamanızda gezinme mekanizmasını oluşturmaya başlamak için ihtiyacınız olan her şeye sahipsiniz. Bir sonraki adım, ekranları ayarlamaktır.

2. React Yerel Uygulamanızda Ekranı Ayarlayın

Bu örnek için, yalnızca iki ekran oluşturacağız — ana ekran ve hakkında ekranı.

adlı bir klasör oluşturun. ekranlar uygulamanızın kök dizini içinde. Daha sonra dizinde HomeScreen.js ve AboutScreen.js adlı iki dosya oluşturun. ekranlar.

HomeScreen.js Dosyanıza Neler Eklenmeli?

HomeScreen.js dosyasını açın ve aşağıdakileri içe aktararak başlayın:

içe aktarmak * gibi Tepki itibaren'tepki';
içe aktarmak { Metin, Görünüm, Stil Sayfası, TouchableOpacity } itibaren"tepki-yerli";
içe aktarmak { kullanımDevlet } itibaren'tepki'

Ardından, HomeScreen işlevsel bileşenini oluşturun ve nesne yapısökümünü kullanarak navigasyon nesnesine erişin (herhangi bir şekilde React en iyi uygulamaları), ardından yaklaşık ekrana gitmek için bir başlık ve düğme döndürün:

ihracatvarsayılanişlevAna ekran({navigasyon}) { 
geri dönmek ( 
<Görüşstil={stil.kapsayıcı}>
<Metinstil={stil.paragraf}> Ana ekran Metin>
 başlık="Hakkında'ya git"
 onPress={() => navigasyon.navigate("Ekran Hakkında")} 
 /> 
Görüş>
 );
}

Burada React Native'e şuraya gitmesini söylüyoruz: Hakkında bir kullanıcı düğmeye bastığında. Bu durumda ekrana herhangi bir veri aktarmıyoruz. Ama diyelim ki istiyorsun fonksiyona veri iletmek; Bunu nasıl yapacağınız aşağıda açıklanmıştır:

ihracatvarsayılanişlevAna ekran({navigasyon}) { 
sabit veri = { web sitesiAdı: "John'un Teknolojisi" }
geri dönmek ( 
<Görüşstil={stil.kapsayıcı}>
// Metin buraya gelecek 
 başlık="Hakkında'ya git"
 onPress={() => navigasyon.navigate("Ekran Hakkında", veri)} 
 /> 
Görüş>
 );
}

Artık butona bastığınızda bu kod verileri bir sonraki ekrana aktarıyor, Hakkında. İçinde AboutScreen.js dosya, rotadan verilere erişebilir ve kullanıcı arayüzünde görüntüleyebilirsiniz.

AboutScreen.js Dosyanıza Neler Eklenmeli?

AboutScreen.js dosyasını açın ve aşağıdaki bağımlılıkları içe aktararak başlayın:

içe aktarmak * gibi Tepki itibaren'tepki';
içe aktarmak { Metin, Görünüm, Stil Sayfası, Düğme } itibaren"tepki-yerli";

Ardından, HakkındaEkran gelen verileri alan fonksiyonel bileşen rota.params özelliği ve kullanıcı arabirimindeki verileri döndürür:

ihracatvarsayılanişlevHakkındaEkran({rota}) { 
izin vermek dataObj = rota.paramlar
geri dönmek ( 
<Görüşstil={stil.kapsayıcı}>
<Metinstil={stil.paragraf}>
 Bu dır-dir {dataObj.websiteName} Hakkında Ekranı 
Metin>
Görüş>
 );
}

Hatırlarsanız, adlı veri nesnesinde tek bir özellik belirtmiştik. web sitesiAdı, şimdi içinde oluşturduğumuz bileşen. Nesneye istediğiniz kadar özellik ekleyebilir ve bunlara hedef ekranlar bileşeni içinden erişebilirsiniz.

Bir sonraki adım, yığın gezginimizi iki ekranla ayarlamaktır.

3. Stack Navigator ile Ekranları Bağlama

App.js içinde, aşağıdaki bağımlılıkları içe aktararak başlayın:

içe aktarmak * gibi Tepki itibaren'tepki';
içe aktarmak Ana ekran itibaren'./screens/Ana Ekran'
içe aktarmak HakkındaEkran itibaren'./screens/HakkındaEkran'
içe aktarmak { NavigationContainer } itibaren"@react-navigation/yerel"
içe aktarmak {createNativeStackNavigator} itibaren"@react-navigation/yerel yığın"

İkinci ve üçüncü satırlarda, az önce oluşturduğumuz iki ekranı içe aktardık. Sonra ithal ettik NavigasyonKapsayıcısı

itibaren @react-navigation/yerel Ve createNativeStackNavigator itibaren @react-navigation/yerel yığın ekranları bağlamamıza yardımcı olmak için.

Sonra, ara createNativeStackNavigator yığını almak için:

sabit Yığın = createNativeStackNavigator()

Bu, uygulamanızda geçiş yapmak istediğiniz ekranları "yığmamıza" olanak tanır.

Uygulama bileşeni işlevini oluşturun ve her iki ekranı da Aşağıda gösterildiği gibi. içine sardığınızdan emin olun. veya işe yaramaz:

ihracatvarsayılanişlevUygulama() { 
geri dönmek ( 
<NavigasyonKapsayıcısı>
<Yığın. gezgin>
<Yığın. Ekranisim="Ana ekran"bileşen = {Ana ekran} />
<Yığın. Ekranisim="Ekran Hakkında"bileşen = {Ekran Hakkında} />
Yığın. gezgin>
NavigasyonKapsayıcısı>
 );
}

Bu kod, HomeScreen ekranını yığının en üstüne yerleştirir; bu, uygulamanın yüklemeyi bitirdiğinde önce Home bileşenini oluşturacağı anlamına gelir.

Şimdi her şey ayarlandı. Uygulamayı tıklayarak test edebilirsiniz. Hakkında'ya git Ana Kullanıcı Arayüzündeki düğme. Bu sizi şuraya yönlendirmelidir: Hakkındave web sitesiAdı kullanıcı arayüzünde görüntülenen özellik:

2 Resim

React Navigation for Native'i kullanmanın en iyi yanı, kurulumunun ve kullanımının çok kolay olmasıdır. Herhangi bir ekstra yapılandırma gerektirmez (kurduğunuz gerekli kitaplıkların yanı sıra) ve ayrıca bağlanabilirsiniz farklı ödeme duvarı türleri (abonelik tabanlı bir uygulama oluşturmayı düşünüyorsanız).

React Native Hakkında Daha Fazlasını Öğrenin

React Native, Android ve iOS cihazlarda çalışan uygulamalar oluşturmak için platformlar arası bir çerçevedir. React Native hakkında öğrenilecek çok şey var ve çerçeveyi kullanmakta yeniyseniz, temelleri öğrenerek başlamalısınız.