Pada awal tahun, kami menerbitkan beberapa materi tentang set komponen populer untuk
React ,
Angular, dan
Vue . Hari ini kami membawa kepada Anda terjemahan dari sebuah artikel dari seri yang sama tentang React Native. Mengingat popularitas React yang berkelanjutan, dan fakta bahwa aplikasi seluler dan
PWA menjadi lebih populer, tidak mengherankan bahwa
React Native menarik lebih banyak perhatian dari komunitas pengembang.
Kerangka kerja React Native sangat mirip dengan React karena aplikasinya mendorong programmer untuk membuat antarmuka pengguna menggunakan komponen yang terisolasi. Kit komponen tersebut, yang dirancang untuk pengembangan antarmuka, memberikan pengembang modul siap pakai, yang penggunaannya membantu menghemat waktu dengan mempercepat pekerjaan. Di sini kita membahas sebelas set komponen yang didukung dengan baik oleh pembuatnya. Mereka mudah-mudahan berguna bagi siapa saja yang harus mengembangkan antarmuka pada React Native.
1. NativeBase
NativeBase adalah serangkaian komponen antarmuka pengguna lintas platform untuk React Native.
NativebasePopularitas serius NativeBase ditunjukkan oleh fakta bahwa proyek ini mencetak sekitar 10 ribu bintang di GitHub, dan memiliki sekitar seribu garpu. NativeBase menempatkan lusinan komponen lintas platform yang siap diprogram oleh programmer. Saat menggunakan NativeBase, Anda dapat, tanpa upaya tambahan, menggunakan perpustakaan pihak ketiga mana pun, dan di sekitar proyek ini telah dikembangkan ekosistem yang luas di mana ada banyak hal berguna - mulai dari
alat untuk membuat proyek dasar hingga
alat untuk mengembangkan tema yang berfungsi untuk mengkonfigurasi eksternal tampilan komponen NativeBase.
2. Bereaksi Elemen Asli
Rangkaian komponen lintas platform
React Native Elements telah mengumpulkan sekitar 12 ribu bintang di GitHub. Komponen dari rangkaian JavaScript-complete ini sangat dapat disesuaikan.
Bereaksi elemen asliPenulis kit
mengatakan bahwa hal yang paling penting dalam React Native Elements adalah struktur komponen, bukan desainnya. Ini berarti bahwa untuk mengkonfigurasi suatu komponen dan mempersiapkannya untuk bekerja, sangat sedikit kode templat yang diperlukan. Pada saat yang sama, orang yang menggunakan komponen-komponen ini memiliki kesempatan untuk sepenuhnya mengontrol penampilan mereka. Pendekatan seperti itu terhadap komponen dapat menarik perhatian banyak lapisan programmer web, dari pemula hingga yang berpengalaman.
Berikut ini adalah aplikasi demo yang dibangun atas dasar React Native Elements, yang dengannya Anda dapat melihat komponen-komponen dari kit ini dalam aksi.
3. Toolkit UI Shoutem
Toolkit pengembangan antarmuka
Shoutem , yang telah mengumpulkan sekitar 3.500 bintang di GitHub, terdiri dari tiga bagian. Ini adalah
komponen antarmuka pengguna,
tema , dan
animasi komponen.
ShoutemShoutem memberi para pengembang satu set komponen lintas platform yang dirancang untuk iOS dan Android. Semua komponen dibuat dengan mempertimbangkan kemungkinan penggunaan bersama mereka. Penampilan mereka dapat
disesuaikan . Setiap komponen juga memiliki gaya standar yang konsisten dengan gaya komponen lainnya. Hal ini memungkinkan untuk membuat komponen yang kompleks tanpa perlu mengkonfigurasi secara manual sistem gaya yang kompleks.
4. UI Kitten
Kit komponen
Kitten UI , pemilik sekitar 3.000 bintang di GitHub, siap membantu pengembang React Native-komponen yang sangat dapat disesuaikan dan cocok untuk digunakan kembali.
Anak kucingUI Kitten didasarkan pada ide definisi gaya pemindahan ke lokasi tertentu, yang membantu menggunakan kembali komponen dan membuatnya mudah untuk menyesuaikan penampilan mereka. Topik yang diterapkan pada komponen cukup mudah untuk diubah, seperti yang mereka katakan, sambil lalu, melewati mereka set variabel yang berbeda.
Ini adalah proyek demo, dengan bereksperimen dengan itu, Anda bisa mengenal UK Kitten lebih baik.
5. Bereaksi Bahan Asli UI
Proyek
React Native Material UI , yang memiliki sekitar 2.000 bintang di GitHub, memberi pengembang web seperangkat komponen antarmuka pengguna yang menerapkan gagasan Desain Bahan Google dan dapat disesuaikan. Saat bekerja dengan React Native Material UI, perlu dipertimbangkan bahwa perpustakaan ini menggunakan objek JS tunggal yang disebut
uiTheme , yang, untuk memastikan tingkat kustomisasi maksimum, dilewatkan melalui konteks.
Bereaksi UI Bahan AsliSecara default, objek
uiTheme didasarkan pada tema
lightTheme , yang dapat ditemukan di
sini . Dan
berikut adalah daftar komponen perpustakaan dengan contoh penggunaannya.
6. Bereaksi Kit Bahan Asli
Meskipun
React Native Material Kit diterbitkan di NPM pada bulan Desember 2017, rangkaian komponen ini, dengan sekitar 4 ribu bintang di GitHub, patut diperhatikan.
Bereaksi Kit Bahan AsliReact Native Material Kit menawarkan kepada pengembang koleksi komponen antarmuka pengguna yang sederhana dan nyaman dan tema yang menerapkan konsep Desain Bahan Google dari Google. Mengapa komponen ini perlu diperhatikan? Intinya adalah kesederhanaannya, dan fakta bahwa tidak ada yang berlebihan di dalamnya yang menciptakan "suara" informasi. Namun, perlu dicatat bahwa karena fakta bahwa perpustakaan ini tidak didukung secara aktif, perpustakaan ini harus digunakan dengan hati-hati.
7. Nachos UI
Perpustakaan
Nachos UI , yang memiliki sekitar 1.500 bintang di GitHub, menawarkan kepada pengembang satu set lebih dari 30 komponen khusus yang, selain menggunakannya dalam lingkungan seluler sebagai bagian dari aplikasi Native React, juga cocok untuk mengembangkan aplikasi web menggunakan
reaksi. web asli .
Nachos uiNachos UI mendukung pengujian yang lebih cantik, benang dan bercanda. Perpustakaan yang bagus dan ditulis dengan baik ini memberi semua orang yang tertarik desain yang menarik dan manajer tema global.
8. Bereaksi Perpustakaan UI Asli
Pekerjaan pada proyek
Perpustakaan Asli UI Bereaksi dilakukan pada
Wix . Ini adalah seperangkat alat ultra-modern untuk mengembangkan antarmuka pengguna dan pustaka komponen untuk React Native. React Native UI Library mendukung, tanpa upaya pemrograman tambahan,
react-native-animatable dan
react-native-blur .
Bereaksi Perpustakaan UI AsliPerpustakaan ini mencakup seperangkat preset gaya (di antaranya - Warna, Tipografi, Bayangan, Border Radius, dan lainnya), yang diterjemahkan ke dalam pengubah.
Berikut adalah contoh menggunakan React Native UI Library.
9. Bereaksi Kertas Asli
Pustaka komponen lintas platform dari
React Native Paper , dengan sekitar 1.500 bintang di GitHub, mengikuti gagasan Desain Bahan Google.
Bereaksi kertas asliSet komponen ini mendukung
tema global . Jika perlu, untuk menyingkirkan modul yang tidak terpakai dari set ini, Anda dapat menggunakan plugin yang sesuai untuk babel.
Berikut ini adalah contoh menggunakan React Native Paper.
10. Bereaksi Ikon Vektor Asli
Proyek
React Native Vector Icons , yang telah mengumpulkan sekitar 10 ribu bintang di GitHub, adalah
koleksi luas ikon khusus untuk aplikasi React Native, cocok untuk digunakan pada berbagai platform.
Bereaksi Ikon Vektor AsliIkon dari React Native Vector Ikon digunakan dalam ribuan aplikasi. Ada kemungkinan bahwa mereka akan berguna bagi Anda.
11. Teaset
Perpustakaan
Teaset , yang telah mengumpulkan sekitar 1.300 bintang di GitHub, mencakup lebih dari 20 komponen yang ditulis dalam JS murni (ES6).
TeasetProyek ini tidak dapat membanggakan dokumentasi yang kaya, tetapi kesederhanaan komponennya, berfokus pada melayani kebutuhan dasar aplikasi React Native, dan penampilannya yang bagus, menunjukkan bahwa Teaset setidaknya layak untuk dilihat.
Ringkasan
Pada awal materi ini, kami berbicara tentang fakta bahwa React Native menarik lebih banyak dan lebih banyak perhatian dari komunitas pengembang karena prevalensi React dan popularitas aplikasi mobile. Oleh karena itu, tidak mengherankan bahwa jumlah pengembangan yang layak yang menerapkan set komponen atau alat bantu untuk membuat aplikasi berbasis Nasib Asli tidak dapat dibatasi pada yang kami periksa di atas. Jika Anda mencari yang serupa dengan aplikasi React Native Anda, berikut adalah beberapa proyek yang perlu diperhatikan:
Pembaca yang budiman! Jika Anda mengembangkan aplikasi seluler berdasarkan React Native, beri tahu kami set komponen dan alat bantu yang Anda gunakan untuk ini.
