Pustaka komponen adalah kumpulan kode yang dapat disesuaikan dan digunakan kembali yang dapat dibuat agar sesuai dengan pola desain aplikasi tertentu. Mereka membantu mempertahankan desain yang konsisten di seluruh platform dan mempercepat proses pengembangan.
Di sini Anda akan mempelajari cara menggunakan pustaka komponen React Native Elements saat membuat aplikasi React Native berikutnya.
Apa itu React Native Elements?
React Native Elements (RNE) adalah upaya sumber terbuka oleh pengembang React Native untuk membuat pustaka komponen yang berguna saat membuat aplikasi Android, iOS, dan web. Tidak seperti banyak pustaka komponen React Native lainnya, RNE mendukung sintaks TypeScript.
Perpustakaan terdiri dari lebih dari 30 komponen yang berfokus pada struktur komponen.
Menginstal Elemen Asli Reaktif Dengan React Native CLI
Instruksi berikut adalah untuk menginstal React Native Elements dalam proyek yang dibuat menggunakan cli React Native.
Instal React Native Elements di aplikasi React Native Anda dengan menjalankan:
instal npm @rneui/themed @rneui/base
Anda juga harus menginstal react-native-vector-icons dan safe-area-context:
npm Install reaksi-warga asli-vektor-ikon bereaksi-warga asli-aman-daerah-konteks
Cara Memasang React Native Elements di Proyek Expo
Untuk menginstal React Native Elements yang sudah ada Pameran proyek, instal paket dan react-native-safe-area-context:
penambahan benang @rneui/themed @rneui/reaksi basa-warga asli-konteks-area-aman
Pertahankan satu manajer paket seperti npm atau benang saat menginstal paket untuk menghindari risiko bentrokan ketergantungan.
Proyek yang dibangun menggunakan expo cli memiliki ikon react-native-vector-icon yang diinstal secara default, jadi Anda tidak perlu menginstalnya.
Styling Komponen Single React Native Elements
Semua komponen yang tersedia melalui RNE mengambil berbagai alat peraga untuk menata komponen dan wadah komponen.
Wadah komponen adalah dasar tag membungkus tag komponen, seperti. Itu tag tidak terkalahkan di sekitar komponen dan mengambil a containerStyle prop untuk menerapkan gaya tampilan.
Sebuah komponen dapat menerima alat peraga gaya default seperti warna, jenis, Dan ukuran. Komponen juga dapat menerima prop gaya khusus yang unik untuk menangani gaya komponen.
Ini semua adalah gaya eksternal untuk komponen.
Misalnya, menata gaya Tombol komponen:
impor { Melihat } dari "bereaksi-asli";
impor { Tombol } dari "@rneui/bertema";
const Komponen Saya = () => {
kembali (
<Melihat>
<Tombol
buttonStyle={{ backgroundColor: "abu-abu" }}
containerStyle={{ lebar: 150 }}
>
Tombol Padat
</Button>
<Tombol
jenis="garis besar"
containerStyle={{ lebar: 150, margin: 10 }}
judul="Tombol Outline"
/>
</View>
);
}
Kode di atas menunjukkan bagaimana Anda dapat menerapkan gaya ke komponen Tombol. One Button menggunakan default jenis prop, dan yang lainnya menggunakan custom buttonStyle menopang. Kedua tombol juga menggunakan containerStyle prop untuk menambahkan gaya tampilan.
Membuat Tema untuk React Native Elements Components
Membuat tema untuk komponen RNE berguna saat Anda ingin menerapkan gaya ke setiap instance komponen tersebut. Dengan tema, menyesuaikan komponen agar sesuai dengan pola desain yang diinginkan menjadi tugas yang mudah.
RNE menyediakan a buatTema() berfungsi untuk menata komponen. Fungsi ini akan menyimpan gaya tema yang menimpa gaya internal atau default setiap komponen.
Untuk membuat tema, panggil buatTema() dan berikan gaya tema yang diinginkan sebagai argumen fungsi:
impor { Penyedia Tema, buat Tema } dari '@rneui/bertema';
const tema = buatTema({
komponen: {
Tombol: {
gaya kontainer: {
margin: 10,
},
gaya judul: {
warna: "hitam",
},
},
},
});
Itu Penyedia Tema akan menerapkan gaya ke komponen apa pun yang terbungkus di dalamnya.
Penyedia menerima a tema prop yang diatur ke tema yang dibuat di atas:
<ThemeProvider theme={tema}>
<Judul tombol="Tombol Bertema" />
</ThemeProvider>
<Judul tombol="Tombol Biasa" />
Gaya tema menimpa gaya komponen internal atau default tetapi tidak akan menimpa gaya komponen eksternal.
Urutan prioritas RNE menempatkan gaya eksternal di bagian atas hierarki.
Contoh:
// Tema
const tema = buatTema({
komponen: {
Tombol: {
gaya kontainer: {
margin: 10,
warna latar belakang: "merah",
},
},
},
});
//Component
<ThemeProvider theme={tema}>
<Judul tombol="Tombol Bertema" warna={"sekunder"}/>
</ThemeProvider>
Pada kode di atas, warna latar belakang dari Tombol komponen akan menjadi sekunder, yaitu warna hijau berlawanan dengan gaya tema merah.
A tema objek dikirimkan dengan RNE, memberikan banyak nilai warna default di luar kotak. RNE menyediakan berbagai opsi seperti ThemeConsumer komponen, gunakanTema() kait, dan makeStyles() hook generator untuk mengakses tema obyek.
Itu ThemeConsumer component akan membungkus komponen Anda yang dirender dengan fungsi anonim. Fungsi anonim ini mengambil tema sebagai penyangga.
Anda dapat mengakses nilai tema dengan a gaya menopang:
impor Reaksi dari 'reaksi';
impor { Tombol } dari 'bereaksi-asli';
impor { Konsumen Tema } dari '@rneui/bertema';
const Komponen Saya = () => (
<ThemeConsumer>
{({ tema }) => (
<Judul tombol="ThemeConsumer" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Atau, Anda dapat menggunakan gunakanTema() hook untuk mengakses tema di dalam komponen.
Misalnya:
impor Reaksi dari 'reaksi';
impor { Tombol } dari 'bereaksi-asli';
impor { gunakanTema } dari '@rneui/bertema';const Komponen Saya = () => {
const { tema } = useTheme();
kembali (
<Lihat gaya={styles.container}>
<Judul tombol="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
Itu makeStyles() hook generator mirip dengan menggunakan style sheet untuk menentukan gaya. Seperti style sheet, ini memisahkan setiap gaya dari luar komponen yang Anda render. Merujuk pada tema objek di dalam prop gaya komponen.
Memperluas Tema Dengan TypeScript
RNE mendukung deklarasi TypeScript di aplikasi Anda, memungkinkan pengembang memanfaatkannya manfaat menggunakan bahasa TypeScript.
Dengan TypeScript penggabungan deklarasi, Anda dapat memperluas definisi tema untuk menambahkan warna dan properti kustom untuk komponen default dan kustom RNE.
Untuk memperluas warna di dalam objek tema, Anda akan membuat objek terpisah TypeScript.ts file dan mendeklarasikan modul @rneui/bertema di dalam file.
Anda kemudian dapat melanjutkan untuk menambahkan warna khusus dan menentukan jenis yang diharapkan:
// **TypeScript.ts**impor '@rneui/themed';
menyatakan modul '@rneui/bertema' {
ekspor antarmukaWarna{
primaryLight: string;
secondaryLight: string;
}
}
Dengan modul ini, Anda dapat meneruskan warna khusus sebagai nilai saat membuat tema:
const tema = buatTema({
warna: {
cahaya utama: "",
cahaya sekunder: ""
},
})
Sekarang warna khusus adalah bagian dari objek tema Anda dan dapat diakses menggunakan ThemeProvider, ThemeConsumer, atau gunakanTema() kait.
Komponen RNE vs. Bereaksi Komponen Asli
Pustaka komponen seperti React Native Elements adalah cara yang bagus untuk mengaktifkan dan menjalankan aplikasi dengan cepat. Mereka menjaga fokus Anda pada struktur aplikasi daripada detail desain. Menggunakan komponen RNE di atas komponen React Native harus dipandu terutama oleh fokus aplikasi Anda dan berapa banyak waktu pengembangan yang Anda miliki.
