Selama pengembangan aplikasi mobile di React Native, saya mencoba beberapa perpustakaan standar untuk navigasi, tetapi ketika menggunakan masing-masing saya merasa sangat mengerikan, sakit neraka. Mereka dibuat sangat merepotkan dan tidak terlihat sehingga pengembangan fitur yang tampaknya paling sederhana pun berubah menjadi pencarian yang luar biasa.
Menggunakan react-navigation atau react-native-router-flux, jika Anda perlu membuat layar yang dapat diakses dari beberapa tempat yang berbeda, akan sangat sulit bagi Anda untuk mengatur hierarki rute bersarang sehingga semuanya berfungsi sebagaimana mestinya. Atau jika Anda membutuhkan layar untuk tampil dengan animasi non-default, Anda juga harus engah. Juga, ide yang berbahaya dan destruktif termasuk komponen UI seperti bilah navigasi dan tab atas diwujudkan dalam perpustakaan ini. Ini adalah pelanggaran langsung dari pendekatan unix-way, ketika satu perpustakaan melakukan satu dan hanya satu fungsi, tetapi secara kualitatif. Karena koneksi komponen UI yang begitu dekat dengan navigasi, bug sangat sering muncul - beberapa bilah navigasi muncul di layar, salah satunya mungkin memiliki tombol kembali dan nama layar lainnya.
Setelah banyak tersedak kesedihan dengan perpustakaan standar, saya memutuskan untuk mengembangkan navigator saya sendiri. Sasaran utama dalam pengembangan adalah kesederhanaan API, tidak adanya struktur yang kaku untuk layar bersarang dan pemisahan animasi dari konten. Jadi react-native-easy-router lahir.
Kesederhanaan API dan kurangnya struktur yang kaku
Dalam navigator yang saya gunakan sebelumnya, parameter yang dilewatkan ke layar hanya dapat diakses di sepanjang jalur yang kompleks seperti `router.state.params.name`. Di navigator saya, saya meneruskan parameter langsung ke komponen layar. Dalam beberapa kasus, ini dapat menyebabkan konflik nama, tetapi saya memutuskan untuk mengabaikan solusi untuk masalah ini. Juga dalam kode di bawah ini Anda dapat melihat bahwa rute tidak memiliki struktur yang jelas dan Anda dapat menambahkan layar baru dari layar lain.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text> </View> ) const Second = ({ router, name }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text>Hello {name}!</Text> <Text onPress={() => router.pop()}>Go back</Text> </View> ) const routes = { First, Second } export default () => <Router routes={routes} initialRoute="First" />
Animasi
Animasi bahkan lebih mudah untuk dikerjakan. Jika dalam reaksi-navigasi dan reaksi-native-router-flux perlu untuk menghindar untuk membuat animasi non-default untuk layar tertentu, maka pada reaksi-asli-router-mudah layar dapat terbang dengan animasi yang berbeda, dan terlebih lagi, layar dapat terbang masuk dan terbang dengan animasi yang berbeda. Misalnya, dalam contoh di bawah ini, layar akan terbang dari bawah dan terbang ke kanan.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text> </View> ) const Second = ({ router }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text onPress={() => router.pop({type:'right'})}>Go back</Text> </View> ) export default () => <Router routes={{ Screen1, Screen2 }} initialRoute="Screen1" />
Anda bahkan dapat menambahkan animasi kustom Anda sendiri. Mungkin Anda ingin layarnya terbang keluar dari sudut kanan bawah dan jatuh bersamaan. Contoh cara melakukan ini dapat ditemukan di
sini .
Kesimpulan
Navigator yang dikembangkan sudah digunakan di beberapa proyek komersial kami, dan telah menerima distribusi kecil dan ulasan hangat di antara beberapa pengembang Asli React. Jika Anda ingin melihat lebih banyak contoh penggunaan dan memutuskan apakah mungkin untuk menggunakan navigator ini di proyek Anda, maka Anda dapat menggali ke
dalam repositori proyek.