rn navio
v0.1.0
Navio adalah perpustakaan navigasi untuk React Native yang dibangun di atas navigasi bereaksi. Tujuan utamanya adalah untuk meningkatkan DX dengan membangun tata letak aplikasi di satu tempat dan menggunakan kekuatan naskah untuk memberikan pelengkapan otomatis dan fitur lainnya.
Navio memungkinkan Anda dengan mudah membuat berbagai jenis aplikasi: berbasis tab bawah, layar tunggal sederhana, dan aplikasi dengan tata letak laci. Ini menangani semua konfigurasi kode boilerplate untuk navigator, layar, tumpukan, tab, dan laci di bawah kap, sehingga Anda dapat fokus mengembangkan logika bisnis aplikasi Anda.
Jika
Naviomembantu Anda, mendukungnya dengan ️
☣️ Navio masih merupakan perpustakaan muda dan mungkin mengalami perubahan di masa depan. Lihat apakah Navio siap produksi
Benang Tambahkan RN-navio
Karena Navio dibangun di atas navigasi bereaksi, Anda harus menginstal perpustakaan berikut:
Benang tambahkan @react-navigation/stack @react-navigation/asli @react-navigation/native-stack @react-navigation/Bottom-tabs @react-navigasi/laci
Untuk informasi lebih lanjut, silakan periksa langkah -langkah instalasi.
Kode ini akan membangun aplikasi sederhana dengan satu layar.
// app.tsximport {text} dari 'react-native'; import {navio} dari 'rn-navio'; const home = () => {
Return <Text> Halaman Beranda </text>;}; const navio = navio.build ({
Layar: {home},
Stacks: {homestack: ['home'],
},
root: 'stacks.homestack',}); ekspor default () => <navio.app />; // app.tsximport {text} dari 'react-native'; import {navio} dari 'rn-navio'; const home = () => {
Return <Text> Halaman beranda </ext>;}; const pengaturan = () => {
Return <Text> halaman Pengaturan </text>;}; const navio = navio.build ({
Layar: {home, pengaturan},
Stacks: {homestack: ['home'], settingsstack: ['settings'],
},
Tab: {apptabs: {tata letak: {hometab: {stack: 'homestack'}, pengaturanStab: {stack: 'settingsstack'},},},
},
root: 'tabs.apptabs',}); ekspor default () => <navio.app />;Jika Anda ingin melihat contoh yang lebih kompleks dan eksotis, silakan ikuti tautan ini.
Anda dapat melakukan bootstrap proyek baru dengan Navio dari Expo-Starter:
aplikasi baru npx cli-rn
Bermain dengan perpustakaan di camilan Expo.
Navio menyediakan koleksi tindakan untuk melakukan navigasi dalam aplikasi. Misalkan, Anda memiliki objek navio :
.N
Objek navigasi saat ini dari Navigasi Bereaksi. Anda dapat melakukan salah satu dari tindakan ini.
.push(name, params?)
Menambahkan rute di atas tumpukan dan menavigasi ke depan.
.goBack()
Memungkinkan untuk kembali ke rute sebelumnya dalam sejarah.
.setParams(name, params)
Memungkinkan untuk memperbarui params untuk rute tertentu.
.setRoot(as, rootName)
Menetapkan root aplikasi baru. Ini dapat digunakan untuk beralih di antara Stacks , Tabs , dan Drawers .
Tindakan terkait tumpukan.
.stacks.push(name)
Menambahkan rute di atas tumpukan dan menavigasi ke depan. Itu bisa menyembunyikan tab tab.
.stacks.pop(count?)
Membawa Anda kembali ke layar sebelumnya di tumpukan.
.stacks.popToTop()
Membawa Anda kembali ke layar pertama di tumpukan, mengabaikan yang lainnya.
.stacks.setRoot(name)
Menetapkan root aplikasi baru dari tumpukan.
Tindakan terkait tab.
.tabs.jumpTo(name)
Digunakan untuk melompat ke rute yang ada di Navigator Tab.
.tabs.updateOptions(name, options)
Opsi pembaruan untuk tab yang diberikan. Digunakan untuk mengubah jumlah lencana.
.tabs.setRoot(name)
Mengatur root aplikasi baru dari tab.
Tindakan terkait laci.
.drawers.open()
Digunakan untuk membuka panel laci.
.drawers.close()
Digunakan untuk menutup panel laci.
.drawers.toggle()
Digunakan untuk membuka panel laci jika ditutup, atau tutup jika terbuka.
.drawers.jumpTo(name)
Digunakan untuk melompat ke rute yang ada di navigator laci.
.drawers.updateOptions(name, options)
Opsi pembaruan untuk konten menu laci yang diberikan. Digunakan untuk mengubah judulnya.
.drawers.setRoot(name)
Mengatur root aplikasi baru dari laci.
Tindakan terkait modal.
.modals.show(name, params)
Digunakan untuk menunjukkan modal dan lulus params yang ada.
.modals.getParams(name)
Mengembalikan Params yang dilewati untuk modal pada metode .show ().
Kait yang berguna.
.useN()
Duplikat useNavigation() Kait dari Navigasi Bereaksi. Digunakan untuk kenyamanan di dalam layar untuk mendapatkan akses ke objek navigasi. Dokumen.
.useR()
Duplikat hook useRoute() dari navigasi bereaksi. Digunakan untuk kenyamanan di dalam layar untuk mendapatkan akses ke objek rute. Dokumen
.useParams()
Digunakan untuk akses cepat ke param rute navigasi. Digunakan untuk kenyamanan di dalam layar saat melewati param.
Navio membutuhkan screens dan setidaknya satu stacks untuk membangun tata letak aplikasi. tabs , drawers , modals , root , hooks , dan defaultOptions adalah opsional dan digunakan untuk tata letak aplikasi yang lebih canggih.
Ini adalah batu bata utama aplikasi Anda dengan Navio. Anda dapat menggunakannya kembali untuk tumpukan apa pun yang ingin Anda bangun.
Layar dapat didefinisikan dengan melewati komponen reaksi polos. Jika Anda ingin melewati beberapa opsi yang menggambarkan layar, maka Anda dapat melewati objek juga.
impor {screen1, screen3} dari '@app/screens'; const navio = navio.build ({
Layar: {One: Screen1, Two: () => {return <> </>;} tiga: {component: screen3, options: (props) => ({title: 'tigaOne'})}
},}); Tumpukan dibangun menggunakan Screens yang telah ditentukan sebelumnya. IDE harus membantu dengan pelengkapan autokel untuk DX yang lebih baik.
Tumpukan dapat ditentukan dengan melewati berbagai Screens . Jika Anda ingin melewatkan beberapa opsi untuk menumpuk Navigator, maka Anda dapat melewati objek.
const navio = navio.build ({
// Layar diambil dari langkah sebelumnya
Stacks: {mainstack: ['One', 'Two'], ExexPlestack: {screens: ['Three'], NavigatorProps: {ScreenListeners: {focus: () => {},},},},
},}); Tab dibangun menggunakan Screens , Stacks , dan Drawers yang telah ditentukan sebelumnya.
Tab dapat ditentukan dengan meneruskan objek dengan content dan, opsional, alat peraga untuk Navigator.
Konten dapat mengambil sebagai nilai salah satu Stacks , Drawers , serangkaian Screens , atau objek yang menjelaskan tumpukan dan opsi untuk tab Bawah (menjelaskan judul, ikon, dll.).
const navio = navio.build ({
// Layar dan tumpukan diambil dari langkah sebelumnya
tab: {apptabs: {tata letak: {maintab: {stack: ['satu', 'dua'], // atau laci: 'somedrawer', options: () => ({title: 'main',}), }, Exampleitab: {stack: 'excellestack', // atau laci: 'somedrawer', options: () => ({title: 'example', }),},}, opsi: {...}, // navigatorprops opsional: {...}, // opsional},
},}); Laci dibangun menggunakan Screens , Stacks , dan Tabs yang telah ditentukan sebelumnya.
Laci dapat ditentukan dengan meneruskan objek dengan content dan, opsional, alat peraga untuk Navigator.
Konten dapat mengambil sebagai nilai salah satu Stacks , Tabs , array Screens , atau objek yang menjelaskan tumpukan dan opsi untuk tab Bawah (menjelaskan judul, ikon, dll.).
const navio = navio.build ({
// Layar dan tumpukan diambil dari langkah sebelumnya
laci: {maindrawer: {tata letak: {main: 'mainstack', contoh: 'examplestack', playground: ['satu', 'dua', 'tiga'],}, opsi: {...}, // opsional navigatorprops: {...}, // opsional},
},}); Modal dibangun menggunakan Screens dan Stacks yang telah ditentukan sebelumnya. Anda dapat menunjukkan/menyajikannya kapan saja saat menggunakan aplikasi.
Modal dapat ditentukan dengan melewati array Screens atau nama Stacks .
const navio = navio.build ({
// Layar dan tumpukan diambil dari langkah sebelumnya
Modal: {exexplemodal: {stack: 'exewLestack', options: {...}, // opsional},
},}); Ini adalah nama root dari aplikasi. Ini bisa menjadi salah satu Stacks , Tabs atau Drawers .
Anda dapat mengubah root aplikasi nanti oleh navio.setRoot('drawers', 'AppDrawer') atau dengan mengubah initialRouteName komponen <navio.App /> .
const navio = navio.build ({
// Tumpukan, tab, dan laci diambil dari contoh sebelumnya
root: 'tabs.apptabs', // atau 'stacks.mainstack', atau 'laci.appdrawer'}); Daftar kait yang akan dijalankan pada setiap Stacks , Tabs atau navigator Drawers yang dihasilkan. Berguna untuk perubahan mode gelap atau bahasa.
const navio = navio.build ({
Hooks: [Usetranslation],}); Opsi default yang akan diterapkan per layar dan Stacks dan wadah Tabs , Drawer , atau wadah Modal yang dihasilkan di dalam aplikasi.
Note SEMUA KANAN DAN Tabs DAN Drawer SCREENS Opsi memiliki headerShown: false secara default (untuk menyembunyikan header navigasi yang tidak perlu). Anda selalu dapat mengubahnya yang mungkin berguna jika Anda ingin memiliki tombol < Back saat menyembunyikan tab (mendorong Stack baru).
const navio = navio.build ({
DefaultOptions: {stacks: {screen: {headershadowvisible: false, headertIntColor: colors.primary,}, container: {headershown: true,},}, tab: {screen: tabdefaultOptions,}, drawer: {screen: drawerdefault: tabdefaultOptions,}, drawer: {screen: drawerdefault, tabdefaultOptions,}, drawer: {screen: drawerdefauld
},}); Navio menghasilkan komponen root untuk aplikasi setelah tata letak didefinisikan. Ini dapat digunakan untuk secara langsung meneruskannya ke registerRootComponent() atau untuk membungkus dengan penyedia tambahan atau menambahkan lebih banyak logika sebelum aplikasi dimulai.
const navio = navio.build ({...}); ekspor default () => <navio.app /> Anda dapat mengubah root aplikasi oleh navio.setRoot('drawers', 'AppDrawer') atau dengan mengubah initialRouteName dari komponen <navio.App /> .
Ini adalah pertanyaan yang paling sering diajukan (di sini, di sini dan di sini). Di bawah ini Anda dapat menemukan dua solusi:
// Gunakan .vigate Metode objek navigasi reaksi dan pass paramsnavio.n.navigate ('mymodal', {screen: 'screenname', params: {userid: 'someid'}}); // akses params pada layar screenconst = () => {
const {userid} = navio.useparams ();};v0.1.+ // gunakan .modals.show Metode Navio dan pass paramsnavio.modals.show ('mymodal', {userid: 'someId'}); // akses params pada layar screenconst = () => {
const {userid} = navio.modals.getParams ('mymodal');};Expo Router adalah perpustakaan perutean yang dirancang untuk aplikasi asli universal bereaksi menggunakan Expo. Ini beroperasi pada sistem perutean berbasis file, menjadikannya pilihan yang sangat baik bagi pengembang yang ingin membuat aplikasi untuk platform asli (iOS dan Android) dan Web menggunakan basis kode tunggal.
Navio, di sisi lain, mengadopsi pendekatan konfigurasi statis, mirip dengan metode pembangunan tata letak yang terlihat dalam reaksi navigasi asli. Navio terutama menargetkan platform asli (iOS dan Android), dengan lebih sedikit penekanan pada optimasi kompatibilitas web. Di Navio, tata letak aplikasi dikonfigurasi dalam satu file.
Kedua perpustakaan dibangun di atas navigasi bereaksi dan dapat digunakan bersamaan dengannya. Ini berarti semua kait, tindakan, kemampuan penghubung yang dalam, dan fitur lain dari navigasi bereaksi diharapkan bekerja dengan mulus dengan keduanya. Khususnya, Navigasi React memperkenalkan konfigurasi statis di V7 (yang belum dirilis).
Navio sangat penting untuk Buddy Marketplace (aplikasi iOS), membantu kami meluncurkannya hanya dalam 2-3 bulan. Penggunaannya dalam aplikasi, yang mendapatkan pengguna setiap hari dan membutuhkan fitur baru dengan cepat, memungkinkan kami untuk lebih fokus pada membuat logika bisnis yang berharga daripada berurusan dengan tugas pengaturan dasar.
Namun, Navio masih merupakan perpustakaan muda dan tidak memiliki beberapa fitur, seperti integrasi penghubung dalam yang mulus, yang penting untuk efektivitas penuh dalam aplikasi produksi. Karena ini bagian dari aplikasi langsung, saya berencana untuk memperbaruinya secara teratur, menambahkan fungsionalitas baru. Anda dapat melihat apa yang akan terjadi dengan memeriksa bagian Paket Masa Depan.
Jika Anda menggunakan Navio di aplikasi Anda, saya ingin mendengar dari Anda, dan jika ada fitur tambahan yang Anda cari.
Navio dimulai sebagai proyek eksperimental (dan sedikit aneh) yang bertujuan meminimalkan kode berulang dalam tata letak aplikasi menggunakan navigasi bereaksi. Saya suka konsep konfigurasi statis, di mana seluruh pengaturan tata letak aplikasi dikondensasi menjadi satu file. Setelah mengimplementasikannya dalam Expo-Starter dan menerima umpan balik positif, saya memutuskan untuk mengintegrasikannya ke dalam aplikasi seluler aktif. Ada fitur tambahan yang ingin saya berintegrasi ke dalam Navio. Salah satu tujuan yang paling menarik adalah menggabungkan navigasi bereaksi dan bereaksi fungsi navigasi asli menjadi API terpadu, merampingkan proses pengembangan lebih jauh.
Masih ada beberapa hal yang ingin saya tambahkan ke perpustakaan:
.updateOptions() untuk tab dan laci tertentu.
Tab dapat ditempatkan di dalam laci dan sebaliknya.
Lewati alat peraga ke modal.
Buat deeplinking lebih mudah dengan menyediakan linking prop ke layar. Masalah.
Jadikan Navio universal dengan menambahkan layar RNN dan RNN.
Perpanjang Navio Funtionality dan App Layout.
Integrasi Navio Mudah Dengan Navigasi Bereaksi (mis. Navio.Stack ())
Masalah naskah @ file index.tsx .
Jangan ragu untuk membuka masalah untuk saran apa pun.
Proyek ini berlisensi MIT
