Dalam kuliah ini, saya ingin menyelami sedikit lebih dalam ke dalam flexbox, terutama mengenai bagaimana Anda menggunakannya dalam aplikasi React
Native.
Jika Anda sudah mengetahui semua itu, tentu saja Anda dapat melewatkan kuliah ini.
Jadi untuk ini, saya menyiapkan aplikasi boneka sederhana dan tentu saja Anda menemukan
bahwa terlampir, itu adalah aplikasi asli React Native yang dibangun dengan expo dan dalam aplikasi. File js di sini, apa yang saya
miliki pada akhirnya hanyalah tampilan dengan tiga tampilan di sana di mana setiap tampilan kemudian memiliki teks
dengan teks satu, dua, tiga, ini hanya membuat
beberapa kotak dengan warna yang berbeda - merah, biru dan hijau dan sekarang kami akan menggunakan flexbox
untuk memindahkan kotak-kotak ini sehingga Anda bisa merasakan bagaimana flexbox bekerja karena itu sangat penting.
Sekarang hal
pertama yang pertama, secara default setiap tampilan di Bereaksi Asli, bahkan jika Anda menetapkan
tidak ada gaya khusus menggunakan flexbox dan itu berbeda dengan web misalnya, di sana jika Anda
memiliki div yang akan setara dengan jenis tampilan, itu tidak dapat menggunakan flexbox secara default.
Dalam React Native, memang, setiap tampilan secara default mengatur anak-anaknya dengan bantuan hal flexbox ini,
flexbox hanyalah sebuah istilah, hanyalah sebuah konsep dari CSS yang semuanya tentang pengorganisasian elemen anak dalam
ruang satu dimensi, jadi
di sini misalnya di kolom. Itu juga merupakan standar lain,
tidak hanya setiap tampilan secara default menggunakan flexbox, tetapi juga secara default mengatur anak-anak dalam kolom, jadi
dari atas ke bawah. Itu juga perbedaan untuk web dan
saya tidak ingin terlalu menekankan perbedaan ini karena tentu saja Anda tidak perlu menjadi pengembang
web untuk membangun aplikasi Bereaksi Asli tapi saya pikir banyak orang tahu pengembangan web, lakukan tahu flexbox CSS
dan karena itu masuk akal juga berbicara tentang perbedaan. Jadi di web saat Anda menggunakan flexbox,
tidak hanya itu
tidak dinyalakan secara default, selain itu
jika Anda mengaktifkannya, defaultnya adalah untuk mengatur semua elemen anak dalam satu baris dan di
sini, defaultnya adalah mengaturnya dalam kolom.
Anda dapat mengubah default itu, jadi dalam kasus ini pada tampilan yang menampung kotak saya, dengan menambahkan arah fleksibel
di sini dan mengatur ini ke baris misalnya, sekarang Anda akan melihat bahwa tiga kotak ini disusun dalam satu baris
dari kiri ke kanan. Sekarang selain baris dan
kolom, Anda juga memiliki baris terbalik dan kolom
mundur dan ini hanya melakukan apa namanya.
Sekarang kita masih memiliki baris tetapi elemen pertama, kotak merah sebenarnya ada di kanan dan tidak di kiri lagi, jadi
itu juga sesuatu yang
bisa Anda lakukan, biarkan saya kembali ke baris. Jadi itulah hal pertama yang bisa Anda lakukan.
Satu hal penting tentang flexbox adalah bagaimana elemen anak berukuran, di sini saya
memberi setiap elemen anak lebar dan tinggi 100.
Sekarang jika kita akan menghapus hal lebar dan tinggi pada setiap elemen anak, maka Anda akan melihat bahwa sekarang
kita memiliki baris yang sangat kecil di sini karena setiap kotak sekarang hanya selebar yang diperlukan oleh anak
itu dan hanya setinggi anaknya. mengharuskan demikian, jadi setiap
kotak di sini yang memegang nomor hanya selebar dan setinggi jumlah yang dikandungnya.
Sekarang Anda dapat mengubahnya dengan wadah flexbox di sekitarnya juga. Mari kita beri lebar katakanlah 300
piksel atau 80% dari lebar induk, jadi dalam hal
ini karena itu adalah elemen root, dari lebar perangkat dan mari beri ketinggian
katakanlah 300.
Jika kita melakukan itu dan sekarang sangat penting, saya melakukan ini pada tampilan yang menampung semua
kotak ini, saya tidak melakukannya sendiri.
Jadi, jika kita menetapkan lebar dan tinggi ini pada kotak di sekitarnya, Anda
melihat sesuatu yang menarik, tinggi diasumsikan untuk
semua elemen, sekarang semua tampilan di kotak flex mengambil ketinggian induk, lebar tidak berdampak di sini.
Itu juga perilaku default yang Anda dapatkan di sini, jelas karena kami belum mengubah apa pun.
Perilaku default di sini memang adalah bahwa elemen anak dalam kotak flex, jadi dalam
tampilan luar di sini, diatur sedemikian rupa sehingga mereka menyelaraskan diri di sepanjang sumbu silang dengan meregangkan.
Oke, itu banyak istilah, apa artinya ini? Sekarang ketika bekerja
dengan flexbox, kami memiliki dua sumbu penting. Sumbu utama tergantung pada arah fleks Anda, untuk baris yang kami miliki di
sini, baris arah fleks, sumbu utama adalah dari kiri ke kanan. Untuk baris terbalik, itu akan kanan ke kiri, untuk kolom, itu akan menjadi
atas ke bawah dan untuk kolom mundur, itu akan menjadi bawah ke atas, jadi itu
sumbu utama dan kemudian
Anda juga memiliki sumbu silang dan itu hanya kebalikannya dari sumbu utama.
Jadi untuk baris di mana sumbu utama dari kiri ke kanan, sumbu silang akan dari atas ke bawah. Jika sumbu utama dari kanan ke kiri yang
akan menjadi kasus untuk baris terbalik, maka sumbu silang akan dari bawah
ke atas.
Oke, jadi itulah konsep poros utama dan poros silang.
Sekarang Anda dapat mengatur elemen anak Anda, jadi dalam pandangan ini di mana kami memiliki tiga kotak sebagai elemen anak,
Anda dapat mengatur elemen anak ini di sepanjang sumbu ini. Anda menggunakan konten yang dibenarkan untuk mengatur
elemen di sepanjang sumbu utama dan Anda harus menyelaraskan item untuk mengatur elemen di sekitar sumbu silang.
Sekarang Anda melihat nilai yang Anda dapatkan untuk membenarkan konten di sini jika Anda menambahkan
kutipan ini atau jika Anda meletakkan kursor di sana dan Anda menekan ruang kontrol. Anda melihat Anda dapat memusatkan elemen, Anda
dapat memposisikannya di akhir atau di awal wadah itu atau Anda dapat menambahkan beberapa ruang di
antaranya, misalnya
jika kita menggunakan ruang di antara sini dan kami menggunakan menyelaraskan pusat item, maka semuanya akan berubah.
Sekarang Anda akan melihat ada mengambil lebar wadah sekitarnya, setiap kotak itu
sendiri masih cukup kecil tetapi mereka terbelah atau mereka didistribusikan melintasi lebar wadah induk
dan mereka tidak lagi mengambil ketinggian karena sepanjang salib sumbu, kami menyelaraskannya dengan menyelaraskan item
dan di sana, saya mengatur ini ke pusat.
Default di sini adalah peregangan dan jika saya atur kembali ke peregangan, maka tidak mengejutkan mereka melakukan peregangan
untuk seluruh ketinggian.
Sekarang jika Anda ingin memastikan bahwa mereka mengambil lebar yang tersedia, Anda tidak dapat mengatur peregangan di
sini pada konten justifikasi yang merupakan kendaraan penentuan posisi sumbu utama Anda, jadi Anda tidak dapat mengatur peregangan di sini.
Jadi apa yang dapat Anda lakukan mengenai hal itu?
Nah, itu adalah sesuatu yang sekarang Anda konfigurasikan pada setiap item anak itu sendiri.
Anda bisa memberi tahu item anak berapa banyak ruang yang seharusnya diambil dari ruang yang berpotensi didapatnya. Peregangan di sini adalah semacam kasus khusus, di sana Anda
mengatur ini pada item induk, biasanya Anda mengatur
ini pada item anak.
Jadi misalnya jika saya mengatur ini ke tengah sekarang sehingga orang tua tidak memberi tahu anak
berapa banyak ruang yang harus diambil, maka kita dapat sepenuhnya mengontrol ruang yang dibutuhkan anak dengan pergi ke gaya
anak dan di sana, Anda dapat menambahkan flex , properti lentur. Properti flex diterapkan ke item yang ada di dalam kotak flex, sehingga
ada di dalam tampilan dalam kasus
ini di sini dan itu bisa menjadi tampilan itu sendiri tetapi itu juga bisa menjadi komponen lain
seperti teks misalnya.
Jadi sekarang di sini, Anda dapat menambahkan flex dan Anda dapat mengatur ini ke nilai
satu misalnya, jadi flex harus berupa angka. Jika Anda mengatur ini menjadi satu, apa
yang akan Anda lihat adalah bahwa sekarang wadah merah tempat saya menyetel flex ke 1 mengambil semua lebar yang tersedia sehingga bisa mendapatkan begitu
banyak sehingga menyisakan ruang yang cukup untuk wadah biru dan hijau sehingga mereka dapat memeras konten mereka ke
dalam flexbox di sekitarnya.
Sekarang kita tidak bisa melihat batas-batas wadah di sekitarnya tetapi batas-batas pada dasarnya akan menjadi tempat item
merah dimulai dan item hijau dan sebagainya pada sumbu horizontal di sini.
Jadi sekarang flex satu memastikan bahwa item merah mendapat sebesar mungkin,
sehingga dibutuhkan ruang sebanyak mungkin. Secara default, tampilan hanya mengambil ruang sebanyak yang dibutuhkan elemen anak
mereka,
jadi karena karakter yang satu ini diperlukan tetapi dengan karakter yang fleksibel, Anda mengubahnya dan mereka sekarang mengambil ruang sebanyak di sepanjang
sumbu utama, jadi sepanjang
lebar di sini, karena mereka dapat Dapatkan. Untuk sumbu silang, sekali lagi itu
kasus khusus, Anda harus melakukan ini pada orang tua. Untuk sumbu utama dan karena kami
memiliki baris di sini, sumbu utama adalah sumbu horizontal dari kiri ke kanan,
Anda melakukan ini dengan properti flex pada anak.
Sekarang tentu saja Anda dapat menambahkan flex ke elemen anak lain juga, seperti yang kedua ke wadah biru dengan
dua di sana, Anda
dapat menambahkan flex satu di sana juga.
Jadi sekarang saya punya flex satu pada container merah dan flex
satu pada container biru dan yang sekarang terjadi adalah keduanya mengambil ruang kosong yang tersedia dan di antara dua
kotak ini, ruang didistribusikan secara merata dan itulah yang ditunjukkan angka ini di sini.
Angka ini adalah angka relatif,
semua item dalam kotak yang sama, dengan properti flex mendistribusikan ruang yang tersedia dengan mempertimbangkan nomor yang
Anda tetapkan di sini dan angka-angka ini relatif satu sama lain.
Jadi, jika saya memberikan dua wadah biru melenturkan sini, maka ini berarti bahwa dari ruang yang tersedia yang Anda miliki
di wadah sekitarnya, setelah mengurangi ruang setiap elemen perlu memeras isinya di sana, wadah biru akan memakan ruang
dua
kali lebih banyak dari yang satu ini karena di sini kita punya satu flex, di sini
kita punya flex dua,
jika kita punya flex tiga di sini, maka ini akan mengambil tiga perlima dari ruang kosong yang tersedia karena kita punya
tiga tambah dua, jadi kita
punya 5 segmen yang tersedia sehingga bisa dikatakan dan di sini wadah merah akan mengambil 3 segmen, wadah
biru akan mengambil 2 segmen.
Jika kita memiliki 1 dan 2, maka kita memiliki tiga segmen yang tersedia dan wadah
biru mengambil dua, merah mengambil satu, sehingga Anda selalu menambahkan angka-angka fleksibel ini dan kemudian mendistribusikan atau itu secara otomatis
dilakukan tentu saja tetapi kemudian ruang yang tersedia didistribusikan demikian.
Jadi sekarang di sini, kita akan melihat bahwa wadah biru dua kali lebih besar dari yang merah atau dibutuhkan
dua kali lebih banyak ruang kosong daripada yang merah.
Jadi ini adalah bagaimana Anda
dapat bekerja dengan flex, Anda dapat mengatur bagaimana item diposisikan dengan arah flex, dengan membenarkan konten dan dengan
menyelaraskan item dan Anda juga dapat membuat item Anda tumbuh dan menyusut dengan bantuan flex.
Jadi sekarang itu pengantar singkat untuk flexbox di React Native, seperti yang saya katakan
terinspirasi oleh Flexbox untuk CSS, jadi jika Anda tahu itu, semua yang saya jelaskan di sini mungkin bukan hal
baru bagi Anda.
Kami akan bekerja dengan flexbox sepanjang kursus
ini, jadi ada hal-hal yang juga akan menjadi lebih jelas dan kami akan banyak
bekerja dengannya dan Anda akan melihat bagaimana Anda dapat membuat antarmuka pengguna yang indah dengan flexbox, flexbox pada akhirnya adalah alat dalam
React Asli untuk struktur konten Anda pada halaman, untuk mengatur konten Anda dan Anda biasanya akan bekerja dengan banyak
pandangan yang Anda juga bersarang sehingga Anda dapat memposisikan elemen seperti yang Anda inginkan karena tentu
saja dan itu juga
penting, Anda tidak perlu hanya perlu memiliki satu tampilan di aplikasi Anda yang menggunakan flexbox, Anda bisa
memiliki tampilan lain di sana yang juga menggunakan flexbox dan sebenarnya seperti yang saya sebutkan,
setiap tampilan secara default menggunakan flexbox dan Anda kemudian dapat menyatukan pandangan-pandangan ini satu sama lain sehingga Anda memposisikan
semua seperti yang Anda inginkan dan Anda juga akan melihat ini
dalam modul ini dan sebenarnya, saya sudah melakukannya di sini. Dalam pandangan saya di sini yang berada di tampilan sekitarnya,
jadi kotak saya di sini, di sana saya juga menggunakan konten justifikasi dan menyelaraskan item untuk memusatkan nomor saya di kotak-kotak
ini, sehingga 1, 2 dan 3 dipusatkan di sana secara horizontal dan vertikal dan itu berfungsi karena kami memiliki flexbox
dinyalakan secara default dan kami tidak dapat mematikannya dengan cara dan oleh karena itu, saya hanya menggunakan dua properti ini di
sini untuk menyelaraskan konten saya dari tampilan ini sepanjang sumbu utama dan silang dan di sini karena saya tidak menetapkan flex khusus arah untuk
tampilan ini, sumbu utama adalah dari atas ke bawah karena arah fleks default adalah kolom dan sumbu silang
dibiarkan dari kiri ke kanan.
Itu hanya catatan.