Gaya inline sangat mudah untuk diterapkan tetapi kelemahannya adalah semakin kompleks aplikasi
Anda dan pengaturan Anda, komponen Anda, semakin sulit untuk mengikuti semua gaya inline ini.
Anda akan memiliki banyak kode di sana, dalam kode JSX Anda dan mungkin sulit untuk membacanya, untuk
memahaminya.
Oleh karena itu, sementara Anda dapat menggunakan gaya
inline, sebenarnya disarankan untuk menggunakan objek stylesheet dan itulah yang sedang dibuat
di sana.
Ini menggunakan stylesheet yang merupakan kelas pada akhirnya yang disediakan oleh React Native
itulah sebabnya kami mengimpornya dari sana dan ini pada akhirnya menciptakan objek Javascript yang berisi semua konfigurasi gaya Anda.
Perbedaannya dengan objek Javascript vanilla yang juga bisa Anda
buat sendiri seperti ini adalah Stylesheet. buat bisa di masa depan juga menerapkan beberapa optimasi kinerja dan menerapkan
gaya Anda lebih efisien pada akhirnya.
Karena itu, Anda harus menggunakannya karena Anda tidak akan kehilangan apa pun kecuali di masa mendatang, Anda
mungkin mendapat manfaat dari optimasi tambahan. Saat ini ketika saya merekam ini, tidak
ada perbedaan, tetapi sekali lagi Anda harus menggunakan Stylesheet. buat karena tidak ada salahnya dan Anda mungkin mendapatkan
optimasi kinerja tambahan di masa mendatang. Keuntungan lain menggunakan stylesheet adalah bahwa ini
akan secara otomatis menambahkan beberapa validasi yang berarti bahwa jika Anda menggunakan properti style yang salah atau nilai yang salah,
React Native akan mendeteksi ini dan akan melempar kesalahan yang hanya memudahkan Anda untuk menemukan kesalahan seperti itu,
jika tidak akan ada validasi,
itu akan gagal diam-diam, itu hanya tidak akan menerapkan gaya dan Anda mungkin
bahkan tidak melihat secara langsung atau Anda akan melihat bahwa penataannya tidak benar tetapi Anda tidak benar-benar melihat mengapa
itu tidak berfungsi, oleh karena itu validasi bawaan ini
adalah keuntungan lain dari menggunakan objek stylesheet di sini. Untuk membuat, Anda melewatkan objek Javascript sebagai argumen,
jadi argumen yang Anda berikan di sini
adalah objek Javascript dan di objek itu, Anda sekarang dapat mendefinisikan gaya Anda
dan Anda tidak melakukan ini dengan menambahkan padding 10 karena akan menjadi tidak jelas di mana
ini harus
diterapkan, alih-alih Anda menggunakan nama properti apa pun pilihan Anda, seperti misalnya layar, untuk mengatur gaya untuk tampilan layar keseluruhan
kami, jadi untuk tingkat
tertinggi ini Anda di sini dan Anda bisa memilih nama yang Anda
inginkan di sini, ini tidak harus layar. Di sini, Anda sekarang memiliki
objek Javascript bersarang, jadi nilai untuk properti ini adalah objek
Javascript lain dan di sana, Anda menyiapkan padding
50 misalnya, jadi gaya yang kami miliki di sana juga.
Sekarang kita dapat menghapus gaya itu di sini, saya
masih memiliki properti gaya tapi saya tidak lagi memiliki objek gaya inline dan sebaliknya di sini, saya
sekarang menunjuk ke gaya yang merupakan konstanta ini yang memegang objek stylesheet kami, saya menunjuk pada gaya dan kemudian dengan
dot, saya menunjuk ke gaya layar dan itulah yang saya maksud, Anda dapat memilih nama yang Anda inginkan di sini,
jika Anda akan menamai
root ini, maka Anda hanya perlu menggunakan root di sana. Jadi Anda dapat menggunakan nama apa pun yang Anda
inginkan, Anda
hanya perlu memastikan bahwa nama yang Anda gunakan di sana memenuhi nama yang Anda gunakan di sini
dan sekarang hanya memberi tahu React Native bahwa tampilan ini harus mendapatkan gaya yang ditentukan untuk layar di sana.
Anda dapat melakukan hal yang sama untuk wadah masukan
kami, katakanlah, sekali lagi nama ini sepenuhnya terserah Anda, wadah masukan. Di sini saya akan
mengambil objek gaya ini saya terapkan
sebagai gaya inline ke tampilan ini sebelumnya dan saya menerapkan ini sebagai nilai saya untuk wadah input ini.
Sekarang di sini pada pandangan itu, kami merujuk gaya. inputContainer, sekarang dengan beberapa pemformatan
otomatis yang Anda dapat lakukan di Visual Studio Code dengan pergi ke preferensi,
pintasan keyboard dan kemudian mencari format dokumen, itulah jalan pintas yang ingin
Anda tekan sehingga autoformats dokumen, file. Dengan itu, kami memiliki beberapa struktur kode bersih di
sini, KAMI melihat ini adalah gaya wadah masukan kami dan kami menerapkannya di sini.
Keuntungan lain dari memiliki objek stylesheet ini juga BAHWA Anda dapat menerapkan gaya yang sama ke
beberapa tampilan tanpa menyalinnya.
Jadi jika kita ingin memiliki gaya wadah masukan, tidak hanya pada tampilan ini tetapi juga
pada wadah ini, kita cukup menulis gaya gaya. inputContainer, Anda dapat menerapkan gaya ini ke komponen sebanyak yang
Anda inginkan.
Sekarang tentu saja, saya tidak membutuhkannya di sini tetapi kita dapat menggunakannya di sini jika kita membutuhkannya. Sekarang gaya terakhir yang ingin saya terapkan adalah
pada input teks di sini.
Di sana, saya hanya akan memberi nama input ini, terlalu banyak kurung kurawal, mengatur gaya saya
di sini kemudian dan kemudian pada input teks, merujuk ke gaya. masukan, seperti
itu. Dan dengan itu jika kita menyimpan ini,
kita memiliki tampilan yang sama seperti sebelumnya, tetapi sekarang kita menggunakan objek stylesheet yang membuat berbagi dan menggunakan kembali
gaya lebih mudah dan yang mungkin juga menghasilkan kita beberapa optimasi kinerja masa
depan dan di samping itu, kode JSX kami di sini hanya jauh lebih ramping sekarang.