Bekerja dengan navigasi saat refactoring warisan proyek di React Native

Materi ini dikhususkan untuk pekerjaan refactoring navigasi dalam pengembangan mobile.
Artikel ini memberikan contoh masalah yang mungkin terjadi, serta jalan keluar dari situasi sulit terkait dengan pekerjaan navigasi dalam pengembangan seluler di React Native.

Kami akan mempertimbangkan fitur utama dan masalah proyek Legacy seluler, langkah demi langkah kami akan melalui serangkaian tindakan yang terdiri dari pengaturan tugas, mengidentifikasi kemacetan, menemukan solusi untuk masalah yang ada, dan mendapatkan hasil yang diinginkan.

Lingkungan kerja

React Native adalah platform pengembangan aplikasi seluler open source yang relatif muda yang dibuat oleh Facebook. Ini digunakan untuk membuat aplikasi untuk Android, iOS dan UWP, dan memungkinkan pengembang untuk menggunakan Bereaksi bersama dengan kemampuan platform sendiri.

Navigasi hampir merupakan elemen terpenting dalam aplikasi seluler. Saat membangun arsitektur aplikasi, Anda harus memberi perhatian khusus pada topik ini.

Perpustakaan paling umum untuk membangun navigasi:

• Bereaksi Navigasi Ini adalah perpustakaan paling populer, yang sering disebutkan dalam dokumentasi resmi. Karenanya, ia memiliki banyak bintang di celengannya di GitHub.
• React-Native-Navigation. Platform ini menggunakan API asli dasar untuk iOS dan Android. Ini adalah alternatif yang populer untuk React-Navigation. Ini cocok untuk mereka yang menghargai kepatuhan dengan perjanjian platform dan tidak terlalu peduli tentang penyesuaian.

Perpustakaan yang kurang umum:

• Bereaksi-router-asli Ini adalah perpustakaan yang tidak lengkap. Tetapi jika Anda sudah terbiasa dengan React Router API dan membuat persyaratan yang cukup sederhana untuk aplikasi Anda, platform ini dapat membantu Anda.
• React-Native-Router-Flux. Perpustakaan ini didasarkan pada React-Navigation, tetapi menyediakan API yang berbeda untuk berinteraksi dengannya.

Pengalaman saya

Saya akan memberi tahu Anda secara singkat tentang pengalaman saya sebagai pengembang. Saya telah bekerja dengan React Native selama lebih dari dua tahun. Ada beberapa proyek yang selesai diterbitkan di app store. Selama waktu ini saya berhasil berkenalan dengan sejumlah besar alat di lingkungan React Native. Navigasi sering menjadi batu sandungan dalam proyek pengembangan seluler. Proyek Legacy yang saya kerjakan tidak terkecuali. Ini akan dibahas nanti.

Tantangan

Kode digandakan selama aplikasi refactoring alih-alih membagi peran menjadi dua jenis (pengguna dan administrator). Sayangnya, masalah yang sama juga muncul pada navigasi.
Fitur arsitektur dari aplikasi tidak diperhitungkan.

Semua layar dibagi menjadi tiga jenis: layar otorisasi, layar administrator, dan layar pengguna.

Alih-alih koneksi logis antara tumpukan root dan Navigator Tab dengan pergantian peran, ada pembagian yang tidak masuk akal ke tumpukan navigasi untuk peran pengguna.



Selain itu, pembangunan navigasi untuk setiap pengguna diulang.



Saya perlu memecahkan masalah berikut:

• Perlambatan umum aplikasi.
• Tidak adanya "pre-renderer" dari layar utama, yang tidak memiliki efek terbaik pada kenyamanan pengguna.
• Navigasi tidak terlihat asli. Animasi transisi terlihat dan tidak nyaman untuk digunakan.

Tambahkan tangkapan layar komponen jendela modal yang berfungsi sebagai navigator tab.

• Layar “Bersikeras” di tumpukan navigasi, mis. tidak ada pembuangan (pemurnian). Layar yang kami buka disimpan di tumpukan. Dengan demikian, kebocoran memori dan crash aplikasi berikutnya hampir tak terhindarkan.

Solusi

Hasil pekerjaan:

• Masalah yang terkait dengan optimalisasi navigasi, kurangnya pre-renderer dan perlambatan umum diselesaikan dengan memperbarui perpustakaan navigasi, menggunakan tab navigator dan menolak untuk menggunakan jendela modal gadungan sebagai navigator.
• Setelah refactoring, navigasi menjadi lebih alami. Melacak pekerjaan animasi transisi, serta prerender layar utama pada tab, telah meningkatkan kenyamanan pengguna.
• Navigasi telah ditumpuk di tab navigasi. Penggunaan transisi dikendalikan dengan lebih baik. Transisi ke tingkat atas digunakan.

Metode berikut digunakan untuk versi Bereaksi Navigasi:

• popToTop - pergi ke layar utama di stack
• ganti - mengganti rute saat ini dengan yang baru
• reset - menghapus status navigator dan menggantinya dengan hasil beberapa tindakan

Hasil

Saya berhasil menyingkirkan sebagian besar layar navigasi duplikat dan membangun struktur yang lebih logis.

Dalam proses refactoring, semua navigasi dirancang ulang. Bagian dari refactoring navigasi juga termasuk menyingkirkan layar ganda dan membuat struktur navigasi terpadu. Layar yang seharusnya berada di luar tab berada di navigator root, dan layar tab navigator itu sendiri dapat dilihat di screenshot.

Kesimpulan

Singkatnya, saya ingin sekali lagi mencatat pentingnya perpustakaan navigasi, serta memperhatikan penggunaan strategi yang paling efektif untuk bekerja dengan mereka dan studi mendalam tentang dokumentasi teknis. Jika tidak, Anda akan menghabiskan banyak waktu dan upaya untuk refactoring dan memperbaiki proyek yang ada dan basis kodenya.

Memilih perpustakaan navigasi adalah langkah penting dalam mengembangkan aplikasi Anda. Setiap keputusan yang dibuat tanpa pertimbangan dan kehati-hatian dapat merusak skalabilitas atau membuat masalah lain.

Tautan yang bermanfaat:

Bereaksi navigasi
Bereaksi asli
Masalah pengembangan proyek seluler lawas
Bereaksi-asli-navigasi
Bereaksi-router-asli
Bereaksi-asli-router-fluks