Sekarang ini juga merupakan latihan yang
bagus untuk Anda, Anda dapat menjeda video di sini dan mencoba memposisikan dua tombol ini di
samping Anda sendiri, hanya dua tombol, bukan input dan dua tombol tetapi dua tombol ini harus dalam baris baru
di bawah input tetapi kemudian duduk bersebelahan.
Setelah jeda singkat yang dapat Anda gunakan untuk menjeda video, tentu saja kami akan melakukannya bersama.
Jadi, apakah Anda berhasil?
Mari kita coba bersama.
Kuncinya di sini adalah menggunakan flexbox dan tampilan lain karena sekali lagi seperti yang saya sebutkan sebelumnya dan sangat penting untuk
dipahami, komponen tampilan adalah komponen inti Anda untuk mengatur komponen lain atau untuk digunakan sebagai wadah yang juga dapat
Anda gayakan tetapi di sini
dalam hal ini kasus, untuk mengatur komponen lain. Jadi saya akan memindahkan dua tombol di dalam
tampilan itu dan sekarang kita dapat menetapkan gaya untuk tampilan itu dan gaya itu tentu saja
akan didefinisikan di sini di objek gaya kita dan saya
akan memberi nama wadah tombol ini, ini terserah Anda, nama ini dan di sana, saya ingin mengatur
arah fleksibel baris agar mereka duduk bersebelahan dan kemudian, saya akan mengatur pembenaran konten ruang antara untuk memiliki
ruang kosong di antara dua tombol.
Sekarang mari kita tambahkan gaya di sini ke tampilan itu, wadah gaya tombol dan simpan ini dan sekarang di sini adalah
tombol tetapi untuk memiliki ruang kosong memiliki efek di sini, yang akan lebih jelas pada Android dengan cara,
bahwa saat ini tidak memiliki
efek, sehingga ruang antara tidak memiliki efek
apa pun, izinkan saya cepat menunjukkan ini di Android.
Soalnya,
tidak ada ruang kosong.
Alasan untuk itu adalah karena kami tidak memiliki lebar yang ditetapkan untuk wadah kancing kami
dan
oleh karena itu ketika Anda belajar, itu
hanya membutuhkan lebar anak-anak dan itu hanyalah lebar dari
dua tombol yang ditambahkan
bersamaan, maka tidak ada ruang kosong untuk tambahkan di antaranya.
Jadi kami memiliki beberapa ruang kosong di antaranya, kami hanya perlu menetapkan dengan ke wadah tombol
dan sekarang lebar itu terserah Anda. Karena input memiliki 80%, kita
bisa menggunakan 80% di sini juga atau mungkin dengan 60% untuk membuatnya sedikit lebih sempit daripada input di atas, sehingga tombol
tidak duduk di tepi input tetapi itu dari tentu terserah Anda dan oleh karena
itu
sekarang dengan itu jika ini dimuat ulang dan kita telah melihat ini di Android dengan
menggunakan cara yang mudah untuk menutupnya dan memulai kembali, sekarang kita akan melihat ruang kosong di
antara dua tombol ini,
ya itu terlihat bagus.
Dan tentu saja Anda dapat bermain-main
dengan itu, Anda juga bisa tentu saja menambahkan gaya ke tombol, Anda
dapat menambahkan alat peraga gaya di sini juga dan menambahkan margin di kiri dan kanan setiap tombol, yang akan
bekerja juga.
Anda juga dapat bermain-main dengan nilai-nilai lain di sini, seperti ruang di sekitar untuk memiliki ruang kosong di sebelah kiri dan
kanan tombol dan bukan hanya di antara mereka.
Ini semua yang dapat Anda lakukan, saya akan pergi dengan ruang di sekitar sini dan memiliki pandangan akhir pada
ini tetapi pada akhirnya itu tentu saja hanya sesuatu yang terserah Anda.
Penting di sini tentu saja Anda memahami bagaimana Anda dapat mencapai sesuatu dengan bantuan tampilan yang Anda
bungkus di sekitar tombol dan flexbox Anda dan kemudian dengan itu, saya
akan mengatakan kita memiliki tampilan yang layak di sini.
Sekarang satu hal terakhir, benar-benar hal terakhir yang saya masih ingin lakukan sekarang adalah mengubah ukuran tombol ini karena mereka tidak berukuran sama dan
saya pikir itu akan terlihat sedikit lebih baik jika mereka memiliki ukuran yang sama.
Sekarang pada sebuah tombol, Anda tidak dapat menambahkan prop gaya dan mengatur lebar, tidak peduli apakah Anda
menggunakan gaya inline atau objek stylesheet,
sebagai gantinya dan itu adalah sesuatu yang Anda harus
tahu itulah sebabnya saya menutupinya di sini, Anda harus membungkus tombol Anda menjadi tampilan yang terpisah, seperti yang saya lakukan di
sini dan kemudian memberikan tombol itu, misalnya di sini kita bisa menambahkan tombol gaya, merujuk ke properti tombol di
sana, untuk setiap tampilan dan di sana pada ini properti tombol yang sekarang saya tambahkan, Anda bisa menambahkan
lebar katakanlah 40% dan itu akan menjadi
40% dari induk pandangan itu, jadi 40% dari tampilan wadah tombol yang dengan sendirinya mengambil 60% dari seluruh
lebar yang tersedia dan kita bisa melakukan ini di tombol lain juga.
Jadi itu hanya sesuatu yang harus Anda ketahui, jika Anda menambahkan tampilan sekeliling Anda di sini, di sekitar tombol Anda.
Sekarang dengan itu jika kita kembali me-restart Android, kita harus memiliki tombol yang berukuran sama yang tentu saja sering
adalah sesuatu yang Anda inginkan.
Tentu saja Anda bisa juga menggunakan nilai piksel di sini daripada nilai persentase tetapi sekarang dengan itu, saya
sangat senang, saya
pikir itu sekarang benar-benar aplikasi yang terlihat bagus, berperilaku baik dan
ya, ini awal yang baik dengan React Native.
Sekarang jelas, ada begitu banyak lagi yang bisa kita pelajari dan kita akan selami, jauh lebih banyak yang bisa
kita lakukan mengenai penataan karena seperti yang telah disebutkan, ini jelas bukan aplikasi terindah yang pernah Anda
buat, tetapi kami membahas banyak dasar-dasar penting sini.