Expo Router kitaplığını kullanarak mobil uygulamalarda bile URL yollarınızı temizleyin.

Dosya tabanlı yönlendirme, bir URL yolunu bir proje dizinindeki belirli bir dosyaya eşleyen yaygın bir web geliştirme tekniğidir. Bu sistem, bina navigasyon sistemleriyle ilgili karmaşık yönlendirme yapılandırmalarından kaçınır.

Expo Router kitaplığının piyasaya sürülmesiyle, React Native uygulamalarıyla dosya tabanlı yönlendirme mümkündür. Expo Router, Expo ile çalışan React Native geliştiricileri için daha iyi bir navigasyon sistemi olabilir.

Expo Router ile Yeniden Tasarlanan Navigasyon

Fuar yönlendiricisi, React Native Expo uygulamaları için bildirime dayalı bir yönlendirme çözümü sağlar. Bu sistem sizin bildiğinizden oldukça farklı. React Navigation kullanarak bir navigasyon sistemi oluşturun. Expo Router, mevcut çalışan navigasyon sisteminin kullanılmasıyla ilgili büyük endişeleri ortadan kaldırıyor.

Bu sorunlar, her yerde tutarlı bir şekilde çalışmayan bir navigasyon sistemine sahip olmayı, derin bağlantı yönetimindeki zorlukları ve ayrıca özel navigasyon geçişleri için karmaşık kurulumları içerir.

instagram viewer

Expo yönlendirici dosya tabanlı gezinme/yönlendirme, iyi çalışan ve JavaScript geliştiricileri ile JavaScript çerçeveleri arasında zaten aşina olan basit bir sistemdir. Rotaları tanımlayabileceğiniz Next.js.

Expo Router'ı Kurma ve Ayarlama

Expo projenizi eski navigasyon sisteminden Expo yönlendiricisine geçirmek oldukça basittir.

1. Adım: Expo Router'ı Kurun

Expo-router yükleyicisini çalıştırmak için bu terminal komutunu kullanın:

npx expo expo-router kurulumu

Ayrıca şu eş bağımlılıkları yüklediğinizden emin olmanız gerekir:

  • tepki-yerel-güvenli-alan-bağlam
  • tepki-yerel-ekranlar
  • expo-bağlama
  • fuar durum çubuğu
  • tepki-yerel-jest-işleyici

Herhangi biri eksikse, bunları çalıştırarak yükleyebilirsiniz:

npx expo kurulumu

2. Adım: Giriş Noktasını Güncelleyin

Yeni bir tane oluştur index.js mevcut dosyanızı değiştirmek için dosya Uygulama.js giriş noktasını ayarlayın ve index.js uygulamanın giriş noktası olarak uygulama.json:

// index.js'yi giriş noktası olarak ayarla
{
"ana": "index.js"
}
// Aşağıdakileri index.js içine aktar
içe aktarmak"expo-router/giriş";

Expo Router bir derin bağlantı Yönlendirme sırasında hangi ekranın veya içeriğin açılacağını belirleyen şema.

ekleyerek uygulamanız için bir derin bağlantı şeması tanımlayın. plan mülkiyet uygulama.json:

{
"fuar": {
"şema": "uygulamam"
 }
}

4. Adım: Son Yapılandırma

Son adım, Expo uygulamanızın metro paketleyicisini ayarlamak ve Babel'i uygulamanızda Expo Router'ı destekleyecek şekilde yapılandırmaktır.

İçeri babel.config.js mevcut kodu şöyle görünecek şekilde değiştirin:

modül.ihracat = işlev (API) {
 api.cache(doğru);
geri dönmek {
 ön ayarlar: ["babel-preset-expo"],
 eklentiler: [
gerekmek.çözmek("expo-router/babel"),
/* */
 ],
 };
};

Şimdi çalıştırarak uygulamanızı yeniden oluşturun ve başlatın:

npx fuarı -- temizle
2 Resim

Expo Router ile Uygulamanızın Rotalarını Oluşturma

içinde bir gezinme akışı oluşturmaya başlayabilirsiniz. uygulama dosya. bu index.js dosya başlangıç ​​noktanızdır. Expo Router, içinde oluşturduğunuz her dosyanın yolunu ekler uygulama her sayfayla eşleşmesi için URL derin bağlantılarıyla uygulamanın yönlendirme sistemine.

Örneğin, bir SecondScreen.js içindeki dosya uygulama dizin ve varsayılan bir bileşeni dışa aktarın:

içe aktarmak { StyleSheet, Metin, Görünüm } itibaren"tepki-yerli";
içe aktarmak Tepki itibaren"tepki";
sabit İkinci Ekran = () => {
geri dönmek (


İkinci Ekran</Text>
 </View>
 </View>
 );
};


ihracatvarsayılan İkinci ekran;
sabit stiller = StyleSheet.create({});

Bu ekrana şu adresten gidebilirsiniz: index.js ile Yönlendiriciyi kullan() yöntem:

içe aktarmak {Yönlendiriciyi kullan} itibaren"expo yönlendirici";
ihracatvarsayılanişlevSayfa() {
sabit navigasyon = useRouter();


geri dönmek (

Merhaba Dünya</Text>
bu ilk sayfa ile ilgili senin uygulaman.</Text>
 başlık="İkinci Ekrana Git"
 onPress={() => {
 navigasyon.push("/İkinci ekran");
 }}
 />
 </View>
 );
}

Burada yönlendiriciyi navigasyona atarsınız ve onu çağırarak Button öğesinin içinde kullanırsınız. navigasyon.push("/saniye"). Push içindeki argüman, gezinmek istediğiniz ekranın dosya yoludur.

İçeri İkinci ekran dizin ekranına şu şekilde de gidebilirsiniz:

içe aktarmak { Bağlantı } itibaren"expo yönlendirici";
sabit İkinci Ekran = () => {
geri dönmek (


İkinci Ekran</Text>
"/" çocuk olarak>

index.js'ye gidin</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Bağlantı öğesi, yolu belirtmek için bir href desteği alır. Uygulamanın içinde, "/" yol, giriş dosyasına (index.js) karşılık gelir. İkinci pervane asChild'dir. Bu pervane, varsayılan Bağlantı bileşeni yerine belirtilen tüm donanımlara sahip bir ilk alt bileşeni işlemenizi sağlar. Bunu, Bağlantı bileşeninin görünümünü özelleştirmek veya özel yönlendirme mantığı uygulamak için kullanabilirsiniz.

Dinamik Rotaları Tanımlama

Dinamik rotalar ile rotaları belirli parametrelere veya verilere dayalı olarak dinamik olarak oluşturabilirsiniz. Sabit bir rota seti tanımlamak yerine, uygulamanızın navigasyonunda esneklik ve uyarlanabilirlik kazanırsınız.

Expo Router'da dinamik rotaları kullanmaya başlamak için dinamik içeriği işlemek üzere rotaları tanımlamanız gerekir. Rota yolu içinde yer tutucular belirterek parametreli rotaları kullanabilirsiniz. Bu yer tutucuların değerleri, rotanıza biri gittiğinde rotanız için kullanılabilir olacaktır.

Örneğin, tek tek blog gönderilerini görüntülemek istediğiniz bir blog uygulaması düşünün. Blog gönderilerinin her birini işlemek için dinamik bir rota tanımlayabilirsiniz:

// uygulama/rotalar/BlogPost.js
içe aktarmak Tepki itibaren"tepki";
içe aktarmak {Yönlendiriciyi kullan} itibaren"expo yönlendirici";
sabit Blog Gönderisi = ({ rota }) => {
sabit { postId } = rota.params;


geri dönmek (

Blog Yazısı Görüntüleniyor ile Kimlik: {postId}</Text>
 </View>
 );
};
ihracatvarsayılan Blog yazısı;

Bu örnekte, adlı bir dinamik tesisat bileşeni tanımlarsınız. Blog yazısı. bu rota.params nesne, rotaya iletilen parametre değerlerine erişmenizi sağlar. Bu durumda, bir posta kimliği İlgili blog gönderisini görüntülemek için parametre.

Dinamik Rotalar Oluşturma

Artık tanımlı bir dinamik rotanız olduğuna göre, verilere veya kullanıcı girişine dayalı olarak rotaları dinamik olarak oluşturabilirsiniz. Örneğin, bir API'den getirilen blog gönderilerinin bir listesine sahipseniz, her blog gönderisi için dinamik olarak rota oluşturabilirsiniz.

İşte bir örnek:

// uygulama/bileşenler/BlogList.js
içe aktarmak Tepki itibaren"tepki";
içe aktarmak {Navigasyonu kullan} itibaren"expo yönlendirici";
sabit BlogListesi = ({ blog gönderileri }) => {
sabit navigasyon = useNavigation();


sabit gezinmeToBlogPost = (posta kimliği) => {
 navigasyon.navigate("Blog yazısı", { posta kimliği });
 };


geri dönmek (

 {blogPosts.map((postalamak) => (
 anahtar={post.id}
 onPress={() => gezinmeToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
ihracatvarsayılan Blog Listesi;

Bu örnekte, blog gönderileri dizi ve render a her gönderi için bileşen. Bir gönderiye bastığınızda, GezinmekBlogYayınına işlev çalışır, geçen posta kimliği navigasyon rotasına

Dinamik Rotaları İşleme

kullanarak dinamik bir rotaya özgü navigasyon olaylarını dinleyebilirsiniz. useFocusEffect kanca.

Örneğin:

// uygulama/rotalar/BlogPost.js
içe aktarmak Tepki itibaren"tepki";
içe aktarmak { Rota, useFocusEffect } itibaren"expo yönlendirici";
sabit Blog Gönderisi = ({ rota }) => {
sabit { postId } = rota.params;


 useFocusEffect(() => {
// postId'ye dayalı olarak blog yazısı verilerini getir
// Odak üzerinde gerekli diğer işlemleri gerçekleştirin
 });


geri dönmek (

Blog Yazısı Görüntüleniyor ile Kimlik: {postId}</Text>
 </View>
 );
};
ihracatvarsayılan Blog yazısı;

Bu örnekte, useFocusEffect kanca, belirli odak olaylarını dinler. Blog yazısı bileşen. Geri aramanın içinde, odaklanılan blog gönderisine göre ek veriler getirebilir, eylemler gerçekleştirebilir veya ekranı güncelleyebilirsiniz.

Dinamik Rotalarla Seyretme

Dinamik bir rotaya gitmek için Expo Router tarafından sağlanan navigasyon yöntemlerini kullanabilirsiniz.

Örneğin, şuraya gitmek için Blog yazısı belirli bir bileşen posta kimliği, kullanabilirsiniz navigasyon.navigate yöntem:

// uygulama/bileşenler/BlogList.js
içe aktarmak Tepki itibaren"tepki";
içe aktarmak {Navigasyonu kullan} itibaren"expo yönlendirici";
sabit BlogListesi = ({ blog gönderileri }) => {
sabit navigasyon = useNavigation();


sabit gezinmeToBlogPost = (posta kimliği) => {
 navigasyon.navigate("Blog yazısı", { posta kimliği });
 };


geri dönmek (

 {blogPosts.map((postalamak) => (
 anahtar={post.id}
 onPress={() => gezinmeToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
ihracatvarsayılan Blog Listesi;

Bir blog gönderisine bastığınızda, GezinmekBlogYayınına fonksiyonu ile ateşlenecek posta kimliği.

Expo Router, Yerel Uygulamalarınızı Yapılandırmanıza Yardımcı Olur

Expo Router, React Native uygulamalarınızda navigasyonu yönetmek için mükemmel bir çözüm sunar. Yerel yönlendirme deneyimini yeniden tasarlayan Expo Router, esneklik ve kullanım kolaylığı sunar.

Expo Router'ın özelliklerini incelediniz, temel yönlendirme kavramlarını incelediniz ve dinamik rotaların nasıl oluşturulacağını keşfettiniz. Expo Router ile dinamik gezinme akışları oluşturabilir, değişen verileri veya kullanıcı girişlerini işleyebilir ve uygulamanızda gezinmeyi kişiselleştirebilirsiniz.