Native Routing Konsep Ulang Dengan Expo Router

Perutean berbasis file adalah teknik pengembangan web umum yang memetakan jalur URL ke file tertentu dalam direktori proyek. Sistem ini menghindari konfigurasi perutean yang rumit yang terkait dengan membangun sistem navigasi.

Dengan rilis perpustakaan Expo Router, perutean berbasis file dimungkinkan dengan aplikasi React Native. Expo Router bisa menjadi sistem navigasi yang lebih baik untuk pengembang React Native yang bekerja dengan Expo.

Navigasi Konsep Ulang Dengan Expo Router

Router pameran menyediakan solusi perutean deklaratif untuk aplikasi React Native Expo. Sistem ini sangat berbeda dari yang Anda inginkan membangun sistem navigasi menggunakan React Navigation. Expo Router memberi perhatian utama dengan menggunakan sistem navigasi yang berfungsi saat ini.

Masalah-masalah ini termasuk memiliki sistem navigasi yang tidak bekerja secara konsisten di mana-mana, kesulitan dalam mengelola penautan dalam, dan juga penyiapan yang rumit untuk transisi navigasi khusus.

Navigasi/perutean berbasis file router pameran adalah sistem sederhana yang bekerja dengan baik dan sudah akrab di antara pengembang JavaScript dan kerangka kerja JavaScript seperti Next.js, tempat Anda dapat menentukan rute.

Menginstal dan Menyiapkan Router Expo

Cukup mudah untuk memindahkan proyek Expo Anda dari sistem navigasi lama ke menggunakan router Expo.

Langkah 1: Instal Router Expo

Gunakan perintah terminal ini untuk menjalankan pemasang expo-router:

npx expo instal expo-router

Anda juga perlu memastikan bahwa Anda telah menginstal dependensi rekan ini:

• react-native-safe-area-context
• layar reaksi-asli
• menghubungkan pameran
• bilah status pameran
• react-native-gesture-handler

Jika ada yang hilang, Anda dapat menginstalnya dengan menjalankan:

instalasi pameran npx 

Langkah 2: Perbarui Titik Masuk

Buat yang baru index.js file untuk menggantikan file Anda yang sudah ada Aplikasi.js titik masuk dan atur index.js sebagai titik masuk aplikasi di dalamnya app.json:

// Tetapkan index.js sebagai titik masuk
{
"utama": "index.js"
}
// Impor yang berikut di dalam index.js
impor"router pameran/masuk";

Expo Router menggunakan a tautan dalam skema untuk menentukan layar atau konten mana yang akan dibuka saat merutekan.

Tentukan skema penautan dalam untuk aplikasi Anda dengan menambahkan a skema properti untuk app.json:

{
"pameran": {
"skema": "aplikasi saya"
 }
}

Langkah 4: Konfigurasi Akhir

Langkah terakhir adalah menyiapkan bundel metro aplikasi Expo Anda dan mengonfigurasi Babel untuk mendukung Router Expo di aplikasi Anda.

Di dalam babel.config.js ubah kode yang ada menjadi seperti ini:

modul.ekspor = fungsi (api) {
 api.cache(BENAR);
kembali {
 preset: ["babel-preset-expo"],
 plugin: [
memerlukan.menyelesaikan("router pameran/babel"),
/* */
 ],
 };
};

Sekarang bangun kembali dan mulai aplikasi Anda dengan menjalankan:

npx pameran --jelas

Membangun Rute Aplikasi Anda Dengan Expo Router

Anda dapat mulai menyiapkan alur navigasi di dalam aplikasi map. Itu index.js file adalah titik awal Anda. Expo Router menambahkan jalur setiap file yang Anda buat di dalamnya aplikasi ke sistem rute aplikasi dengan tautan dalam URL untuk mencocokkan setiap halaman.

Misalnya, buat a SecondScreen.js file di dalam aplikasi direktori dan ekspor komponen default:

impor { Lembar Gaya, Teks, Tampilan } dari"bereaksi-asli";
impor Reaksi dari"reaksi";
const Layar Kedua = () => {
kembali (


Layar Kedua</Text>
 </View>
 </View>
 );
};
eksporbawaan Layar Kedua;
const gaya = StyleSheet.create({});

Anda dapat menavigasi ke layar ini dari index.js dengan gunakanRouter() metode:

impor { gunakanRouter } dari"router pameran";
eksporbawaanfungsiHalaman() {
const navigasi = useRouter();
kembali (

Halo Dunia</Text>
Ini adalah halaman pertama dari aplikasi Anda.</Text>
 judul="Arahkan ke SecondScreen"
 onPress={() => {
 navigasi.push("/Layar Kedua");
 }}
 />
 </View>
 );
}

Di sini Anda menetapkan router ke navigasi dan menggunakannya di dalam elemen Tombol dengan menelepon navigasi.push("/detik"). Argumen dalam push adalah jalur file dari layar yang ingin Anda tuju.

Di dalam Layar Kedua Anda juga dapat menavigasi ke layar indeks seperti ini:

impor { Tautan } dari"router pameran";
const Layar Kedua = () => {
kembali (


Layar Kedua</Text>
"/" sebagai Anak>

Arahkan ke index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Elemen tautan mengambil penyangga href untuk menentukan jalur. Di dalam aplikasi, itu "/" path sesuai dengan file entri (index.js). Prop kedua adalah asChild. Prop ini memungkinkan Anda merender komponen anak pertama dengan semua prop yang ditentukan, bukan komponen Tautan default. Anda dapat menggunakan ini untuk menyesuaikan tampilan komponen Tautan atau untuk mengimplementasikan logika perutean khusus.

Menentukan Rute Dinamis

Dengan rute Dinamis, Anda dapat membuat rute secara dinamis berdasarkan parameter atau data tertentu. Alih-alih menentukan serangkaian rute tetap, Anda mendapatkan fleksibilitas dan kemampuan beradaptasi dalam navigasi aplikasi Anda.

Untuk mulai menggunakan rute dinamis di Expo Router, Anda perlu menentukan rute untuk menangani konten dinamis. Anda dapat menggunakan rute berparameter dengan menentukan placeholder di dalam jalur rute. Nilai untuk placeholder ini kemudian akan tersedia untuk rute Anda saat seseorang menavigasi ke sana.

Misalnya, pertimbangkan aplikasi blog tempat Anda ingin menampilkan setiap posting blog. Anda dapat menentukan rute dinamis untuk menangani setiap postingan blog:

// aplikasi/rute/BlogPost.js
impor Reaksi dari"reaksi";
impor { gunakanRouter } dari"router pameran";
const Posting Blog = ({ rute }) => {
const { postId } = route.params;
kembali (

Menampilkan Posting Blog dengan ID: {postId}</Text>
 </View>
 );
};
eksporbawaan Posting Blog;

Dalam contoh ini, Anda menentukan komponen rute dinamis bernama Posting Blog. Itu route.params objek memungkinkan Anda untuk mengakses nilai parameter yang diteruskan ke rute. Dalam hal ini, Anda mengakses a postId parameter untuk menampilkan posting blog yang sesuai.

Menghasilkan Rute Dinamis

Sekarang setelah Anda menentukan rute dinamis, Anda dapat membuat rute secara dinamis berdasarkan data atau input pengguna. Misalnya, jika Anda memiliki daftar postingan blog yang diambil dari API, Anda dapat membuat rute secara dinamis untuk setiap postingan blog.

Berikut contohnya:

// aplikasi/komponen/BlogList.js
impor Reaksi dari"reaksi";
impor { gunakanNavigasi } dari"router pameran";
const DaftarBlog = ({ posting blog }) => {
const navigasi = useNavigation();
const navigasiToBlogPost = (postId) => {
 navigasi.navigasi("Posting Blog", { postId });
 };
kembali (

 {blogPosts.peta((pos) => (
 key={post.id}
 onPress={() => navigasiToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksporbawaan DaftarBlog;

Dalam contoh ini, Anda beralih ke blogPosts array dan render a komponen untuk setiap pos. Saat Anda menekan kiriman, file navigasiToBlogPost fungsi berjalan, melewati postId ke jalur navigasi.

Menangani Rute Dinamis

Anda dapat mendengarkan acara navigasi khusus untuk rute dinamis menggunakan useFocusEffect kait.

Misalnya:

// aplikasi/rute/BlogPost.js
impor Reaksi dari"reaksi";
impor { Rute, useFocusEffect } dari"router pameran";
const Posting Blog = ({ rute }) => {
const { postId } = route.params;
 gunakanFocusEffect(() => {
// Ambil data posting blog berdasarkan postId
// Lakukan tindakan lain yang diperlukan pada fokus
 });
kembali (

Menampilkan Posting Blog dengan ID: {postId}</Text>
 </View>
 );
};
eksporbawaan Posting Blog;

Dalam contoh ini, useFocusEffect hook mendengarkan acara fokus khusus untuk Posting Blog komponen. Di dalam panggilan balik, Anda dapat mengambil data tambahan, melakukan tindakan, atau memperbarui layar berdasarkan postingan blog yang difokuskan.

Menavigasi Dengan Rute Dinamis

Untuk menavigasi ke rute dinamis, Anda dapat menggunakan metode navigasi yang disediakan oleh Expo Router.

Misalnya, untuk menavigasi ke Posting Blog komponen dengan spesifik postId, Anda dapat menggunakan navigasi.navigate metode:

// aplikasi/komponen/BlogList.js
impor Reaksi dari"reaksi";
impor { gunakanNavigasi } dari"router pameran";
const DaftarBlog = ({ posting blog }) => {
const navigasi = useNavigation();
const navigasiToBlogPost = (postId) => {
 navigasi.navigasi("Posting Blog", { postId });
 };
kembali (

 {blogPosts.peta((pos) => (
 key={post.id}
 onPress={() => navigasiToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksporbawaan DaftarBlog;

Saat Anda menekan postingan blog, tombol navigasiToBlogPost fungsi akan menyala dengan postId.

Expo Router Membantu Anda Menyusun Aplikasi Asli Anda

Router Expo memberikan solusi luar biasa untuk mengelola navigasi di aplikasi React Native Anda. Dengan membayangkan kembali pengalaman perutean asli, Expo Router menawarkan fleksibilitas dan kemudahan penggunaan.

Anda telah menjelajahi fitur-fitur Expo Router, mempelajari konsep perutean dasar, dan menemukan cara membuat rute dinamis. Dengan Expo Router, Anda dapat membuat alur navigasi dinamis, menangani beragam data atau masukan pengguna, dan mempersonalisasi navigasi di aplikasi Anda.