15 Bereaksi Perpustakaan Komponen Asli yang Harus Anda Ketahui pada tahun 2020

Bereaksi Perpustakaan Komponen Asli Yang Harus Anda Ketahui


Bereaksi komponen asli dapat menjadi penghemat waktu yang sangat besar ketika Anda sedang mengerjakan proyek aplikasi Anda berikutnya. Bagaimana bisa? Baiklah, mari kita mulai dengan Bereaksi sendiri. Anda mungkin tahu bahwa React adalah pustaka JavaScript open-source yang membantu dalam membangun antarmuka pengguna untuk aplikasi berbasis web dan seluler. Ini mencakup sejumlah komponen yang dapat Anda gunakan dengan mudah untuk aplikasi Anda.

Biasanya, saat membangun komponen di Bereaksi, Anda perlu mengaturnya agar sesuai dengan pedoman platform yang Anda targetkan. Di situlah Bereaksi Asli bisa membantu. Ini adalah kerangka kerja yang dapat Anda gunakan untuk mengembangkan aplikasi seluler dengan menggunakan Bereaksi bersama dengan kemampuan asli platform target.

Sebelumnya, kami menulis posting yang menampilkan pustaka dan kerangka kerja komponen UI terbaik. Dalam pos ini, kita akan melihat lebih dekat pada perpustakaan komponen Asli Bereaksi secara khusus.

Pustaka komponen asli Bereaksi Asli terbaik tahun ini

1. NativeBase

Pustaka komponen asli React Native terbaik # 1: NativeBase

Jika Anda menemukan diri Anda menulis ulang komponen Bereaksi untuk platform yang berbeda, Anda harus mencobanya dengan NativeBase, kerangka kerja front-end yang dinamis. Perpustakaan adalah kumpulan komponen lintas platform penting React Native dan merupakan tempat yang baik untuk mulai membangun aplikasi Anda. Komponen dibangun dengan React Native yang dikombinasikan dengan beberapa fungsi JavaScript dengan properti yang dapat disesuaikan. Anda juga dapat menggunakan pustaka asli pihak ketiga mana pun di luar kotak.

NativeBase sepenuhnya open-source dan memiliki lebih dari 12.000 bintang Github. Namun, tema datang pada premium karena lebih banyak fitur dan layar ditambahkan. NativeBase sekarang tersedia untuk pengguna web terlalu. Dengan menggunakan basis kode JavaScript yang sama dan bekerja dengan desain khusus platform untuk Android dan iOS, Anda dapat mencapai tampilan dan nuansa asli untuk aplikasi Anda. Proyek open source mereka termasuk aplikasi starter asli, aplikasi Twitter Clone, aplikasi ToDo dan aplikasi tutorial. Di keranjang premium mereka, Anda akan menemukan aplikasi pemula untuk pemesanan, sewa, daftar pekerjaan, perpesanan dan banyak lagi.

2. Kit Bahan Bereaksi Asli

Pustaka komponen asli React Terbaik asli # 2: material-kit-react-native

Material Kit React Native menawarkan templat aplikasi asli gratis dengan desain bahan. Dibangun dengan Kerangka kerja Galio, itu mendesain ulang komponen yang paling umum untuk menjaga hal-hal minimal dan selaras dengan desain material Google. Mudah digunakan, dan mencakup 200+ elemen kerajinan tangan seperti tombol, kartu, navigasi, dan input. Semua komponen dapat mengambil variasi warna dengan membuat perubahan pada tema. Selain itu, ada lima plugin khusus dan lima halaman contoh.

Dengan hampir 200 bintang menyala Github, itu menawarkan Versi pro juga yang memberi Anda akses ke lebih banyak halaman contoh dan dokumentasi.

3. Bereaksi Elemen Asli

Pustaka komponen asli React Terbaik asli # 3: react-asli-elemen

React Native Elements adalah cross-platform React Native UI toolkit yang menyatukan di satu tempat sejumlah komponen UI open source hebat yang dibuat oleh pengembang. Anda dapat memasukkan ke dalam paket yang disatukan oleh React Native Elements dan pastikan bahwa API memiliki tampilan dan nuansa yang konsisten. Tidak mengherankan bahwa ia telah menerima 17.000 bintang Github.

Paket ini mencakup seluruh keranjang komponen seperti harga, lencana, overlay, pembagi, dan bilah pencarian khusus platform. Mereka mudah digunakan dan benar-benar dapat disesuaikan. Alat peraga untuk semua komponen didefinisikan dalam satu lokasi pusat, yang memungkinkan untuk memperbarui atau memodifikasi komponen dengan mudah. Selain itu, dapat berfungsi sebagai platform yang menghubungkan tim kecil yang mengembangkan aplikasi React Native komersial dengan kontribusi open source.

Untuk menggunakan Bereaksi Asli untuk proyek berbasis web Anda, ada Bereaksi Web Asli. Ini memungkinkan pembuatan UI adaptif cepat dalam JavaScript, dan terintegrasi dengan alat React Dev. Anda dapat membagikan basis kode Anda antara React Native apps dan aplikasi web. Ini mendukung jenis, klik atau geser sebagai mode input, memiliki aksesibilitas built-in dan dukungan RTL, dan digunakan oleh orang-orang seperti Twitter, Uber dan Flipkart.

4. Lottie untuk Bereaksi Asli

lottie

Lottie adalah perpustakaan dari Airbnb untuk ponsel guna membantu Anda menambahkan animasi ke aplikasi Anda. Biasanya, setelah membuat animasi di Adobe After Effects, Anda harus mengubahnya menjadi format yang dapat digunakan di aplikasi web Anda. Lottie membantu Anda dengan ini.

Ia bekerja dengan mengekspor data animasi dalam format JSON dari ekstensi After Effects, BodyMovin. Ekstensi ini dibundel dengan pemutar JS untuk membuat animasi di web. Ini berfungsi dengan Bereaksi Asli juga, dan Anda dapat mengakses dokumen resmi pada Github di mana ia telah mengumpulkan hampir 12.000 bintang.

Perpustakaan dan plugin Lottie adalah tersedia secara gratis, dan Anda dapat menggunakan koleksi file animasi yang dikuratori untuk membuat aplikasi Anda menarik dan menarik. File animasi berukuran kecil dan dalam format vektor. Dengan demikian, Anda seharusnya tidak mengalami dampak apa pun pada kinerja aplikasi Anda. Pada saat yang sama, itu dapat membumbui UI Anda dan membuatnya lebih menarik secara visual.

5. Bereaksi Ikon Vektor Asli

ikon reaksi-asli-vektor

Yang ini adalah salah satu pustaka komponen React Native terbaik jika apa yang Anda cari adalah beberapa ikon untuk digunakan di aplikasi Anda. Dengan perpustakaan yang terdiri dari 3.000+ ikon, Anda cukup yakin untuk menemukan sesuatu yang sesuai dengan kebutuhan Anda. Terlebih lagi, dimungkinkan untuk menyesuaikan, gaya, dan memperluas ikon sambil mengintegrasikannya dalam proyek Anda.

Paket ini mendukung TabBar dan Toolbar Android, serta sumber gambar dan font multi-gaya. Dengan hampir 12.000 bintang menyala Github, itu bisa sangat cocok untuk tombol, logo, dan navbars. Itu menarik Bereaksi perpustakaan animasi Asli menggabungkannya dengan ikon apa saja untuk membuat komponen animasi. Jika Anda sudah memiliki font ikon dengan file CSS terkait maka Anda dapat dengan mudah menghasilkan set ikon dengan skrip generate-icon.

6. Nyalakan CLI

menyalakan

Ignite CLI adalah starter kit yang solid untuk React Native apps. Tanpa biaya sama sekali, boiler Reate Native default dengan mudah membantu Anda membangun aplikasi asli. Ini menginstal dengan mudah dan mematuhi praktik terbaik dalam konstruksinya, sambil memungkinkan Anda untuk menyesuaikan pelat ketel dengan proyek Anda. Di luar kotak, ia berfungsi dengan Android dan iOS. Ada juga dukungan untuk plugin mandiri.

Selain itu, Anda dapat memilih dari sejumlah pelat ketel atau memulai sendiri. Sistem plugin modular memungkinkan Anda untuk menambahkan fitur aplikasi atau menulis sendiri. Layar contoh penggunaan membantu Anda menguji pustaka pihak ketiga dan membuat aplikasi yang terdiri dari beberapa komponen. Layar juga berisi contoh aplikasi yang umum digunakan yang dibangun dengan komponen dasar. Untuk membantu Anda mengidentifikasi komponen dan mengubahnya dengan mudah, layar ini juga mencatat contoh dalam file komponen. Dari layar ini, Anda dapat menguji, menggunakan, dan berbagi komponen dengan tim Anda. Ignite CLI telah mendapatkan 10.000+ bintang di Github.

7. Bereaksi Mapview Asli

bereaksi-asli-peta

Salah satu pustaka komponen React Native yang menawarkan komponen peta untuk Android dan iOS adalah React Native Mapview. Konstruksinya sedemikian rupa sehingga fitur reguler pada peta seperti penanda dan poligon ditetapkan sebagai anak-anak komponen Mapview. Ini membantu API untuk secara deklaratif mengontrol fitur-fitur pada peta secara intuitif. Di pihak Anda, Anda harus memastikan mengaktifkan Google Maps API di konsol Google.

Ada banyak yang dapat Anda lakukan untuk menyesuaikan gaya peta. Anda akan dapat mengubah posisi tampilan peta, melacak wilayah / lokasi dan membuat tempat menarik diklik di Google Maps. Anda dapat mengaktifkan pembesaran ke marker atau koordinat yang ditentukan, atau bahkan menghidupkannya. Jika Anda menetapkan nilai wilayah animasi ke prop, Mapview dapat memanfaatkan API Animasi untuk mengontrol pusat peta dan memperbesar. Kecuali Anda menentukan marker khusus, marker standar akan diberikan.

Apa yang keren adalah markernya dapat diseret, dapat dikustomisasi menggunakan gambar, dan mereka memperbarui UI lain saat diseret. Jika Anda membutuhkan lebih banyak, ada info khusus untuk spidol, pembuat poligon, dan hamparan lingkaran dan poligon. Pengguna iOS dapat membuat polyline gradien. Tidak mengherankan bahwa ia memiliki lebih dari 10.000 bintang Github.

8. Bereaksi Obrolan Asli Asli

bereaksi-native-gifted-chat

Seperti namanya, React Native Gifted Chat akan membantu Anda dalam mengatur UI Obrolan untuk React Native (dan web). Ditulis dengan TypeScript, itu termasuk komponen yang sepenuhnya dapat disesuaikan yang membantu memuat pesan sebelumnya atau menyalin pesan ke clipboard dan banyak lagi. Ada InputToolbar juga yang membantu pengguna melewati keyboard.

Untuk meningkatkan pengalaman pengguna, ini memungkinkan Avatar sebagai inisial pengguna, tanggal yang dilokalisasi, Input Teks multi-baris, pesan balasan cepat (bot) dan pesan sistem. Ada juga dukungan untuk Redux. Obrolan Berbakat memiliki 8.000+ bintang di Github.

9. Bereaksi Asli Kitten UI

bereaksi-asli-ui-kitten

Salah satu pustaka komponen Native React yang dapat digunakan sebagai starter kit untuk aplikasi seluler untuk domain apa pun, termasuk eCommerce, adalah React Native UI Kitten – implementasi React Native dari Sistem Desain Eva. Dengan peringkat 5.000+ bintang di Github, ia menawarkan satu set sekitar 20 komponen keperluan umum yang ditata dengan cara yang sama untuk menjaga tampilan visual.

Dengan pustaka sumber terbuka dan gratis selamanya, Anda dapat menggunakan tema yang disediakan, atau membuat sebanyak mungkin tema Anda sendiri, semua tanpa mengubah kode sumber komponen. Terlebih lagi, Anda dapat beralih antara tema gelap dan terang dalam runtime tanpa perlu memuat ulang halaman. Setelah Anda menginstal paket UI Kitten dari NPM, Anda dapat mengimpor komponen dan mulai menggunakannya di proyek Anda.

10. Bereaksi Kertas Asli

kertas reaksi

Pustaka gratis dan sumber terbuka lainnya adalah React Native Paper. Ini memiliki semua komponen utama, dan komponen ini dirancang sesuai dengan standar desain Material Google.

Kertas adalah lintas-platform dan berfungsi di web dan seluler. Ada komponen dan interaksi yang sesuai dengan hampir setiap skenario penggunaan. Sebagian besar detail, termasuk animasi, aksesibilitas, dan logika UI diurus. Anda dapat menyesuaikan warna default atau membuat warna Anda sendiri. Selain itu, Anda memiliki dukungan tema penuh, serta opsi untuk beralih antara mode gelap dan terang. Di Github, rak hingga 4.000+ bintang.

11. Bereaksi Kit Bahan Asli

reaksi-asli-bahan-kit

Berikutnya pada daftar kami perpustakaan komponen React Native adalah satu set komponen UI yang membawa desain material ke React Native. Di dalam, Anda akan menemukan tombol, kartu, slider rentang dan bidang teks. Anda juga akan melihat pemintal dan bilah kemajuan untuk menampilkan pemuatan, serta matikan sakelar, tombol radio, dan kotak centang.

Yang diperlukan hanyalah beberapa baris kode untuk menambahkan tombol menggunakan pembangun yang telah ditentukan yang mematuhi tema default Material design lite. Menggunakan pembangun, Anda juga dapat membuat tombol yang disesuaikan dari awal. Sama halnya dengan bidang teks bawaan. Tidak hanya itu, Anda dapat menyesuaikan gaya dengan mengubah tema global. Ini akan memengaruhi semua kotak centang dan tombol radio di seluruh aplikasi. Di Github, perpustakaan ini menghasilkan 4.700 bintang.

12. Bereaksi UI Bahan Asli

bereaksi-material-asli-ui

React Native Material UI menawarkan hampir 20 komponen untuk React Native. Komponennya termasuk tombol aksi, avatar, sub judul, laci, pembagi, bilah alat, dan lainnya. Komponen-komponen ini sangat dapat disesuaikan dan menggunakan desain material dalam konstruksinya. Kustomisasi apa pun yang Anda buat untuk tema dapat diperluas ke komponen lain juga, termasuk apa pun yang Anda bangun sendiri. Perubahan lokal dapat dilakukan dengan mengganti gaya di mana pun dibutuhkan.

Jika Anda sudah menggunakan React Native Vector Ikon, tidak banyak yang bisa dilakukan dengan cara pemasangan. Selain itu, Anda harus mengunduh ikon materi untuk Android dan pastikan sudah Roboto untuk iOS. Perpustakaan ini telah menghasilkan 3.000+ bintang di Github.

13. RNUILIB

rnuilib

Dengan lebih dari 60 komponen dalam kit ini, RNUILIB mengaktifkan hampir 2.000 bintang Github. Dengan contoh langsung disertakan untuk semua komponen, Anda dapat memeriksa opsi yang tersedia sebelum Anda menggunakannya dalam proyek Anda.

Beberapa komponen adalah: gambar animasi, pemindai untuk menunjukkan kemajuan, avatar untuk menampilkan gambar profil, tombol dasar dan komponen slider gradien.

14. Nachos UI

Nachos UI

Dengan 30+ komponen siap pakai yang dapat Anda gunakan dengan proyek JavaScript atau React Native, Nachos UI memberi skor 1.900+ bintang di Github. Yang benar-benar membantu adalah Anda tidak perlu terlalu khawatir tentang penataan komponen apa pun. Yang harus Anda lakukan adalah mengimpor input pra-gaya dari satu komponen ke komponen lainnya. Setelah menginstal kit Nachos UI, pilih komponen yang Anda inginkan, impor kode asli yang sesuai React dan kemudian pergi untuk menyesuaikannya sesuai dengan proyek Anda.

Perangkat lunak bebas, sumber terbuka, dan berbasis komunitas ini menggunakan Avocode, alat berfitur lengkap untuk berbagi dan memeriksa desain Photoshop dan Sketch. Terimakasih untuk Bereaksi Asli untuk web, Anda dapat menggunakannya untuk proyek berbasis web juga.

15. Shoutem

shoutem

Shoutem adalah platform pembuatan aplikasi yang bekerja dengan menggunakan ekstensi atau blok bangunan modular, agak seperti membangun situs web dengan plugin di WordPress. Dengan 40+ ekstensi fitur lengkap, ia mengumpulkan 450+ bintang di Github. Ekstensi mencakup galeri untuk foto dan video, produk, acara, menu restoran, dan lainnya. Anda dapat menggunakan ekstensi sumber terbuka ini secara gratis di aplikasi Anda. Dan, hanya dengan mem-forking mereka, Anda dapat memodifikasinya dengan cara apa pun yang Anda inginkan.

Shoutem menawarkan banyak layanan back-end seluler seperti analitik, otentikasi pengguna, tata letak, pemberitahuan push, dan lainnya. Lebih lanjut, ada banyak tema yang dikodekan dengan baik untuk Anda gunakan dan sesuaikan. Shoutem menggunakan JavaScript 100% dan Bereaksi Asli.

Nah, itu daftar kami pustaka komponen Asli Bereaksi terbaik. Yang mana yang kamu pilih? Bagikan komentar Anda.

Anda mungkin juga tertarik dengan artikel ini:

  • Bereaksi Template Asli Gratis untuk Pengembangan Aplikasi

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map