Jadi kita mulai dengan input teks, saat ini kita tidak melakukan apa-apa dengan nilai-nilai yang dimasukkan pengguna tetapi sebelum
kita melakukannya, mari kita pastikan bahwa sebenarnya tombol tidak di bawah input itu tetapi di sebelahnya di sebelah
kanan dan untuk itu
lagi, kita perlu bekerja pada tata letak.
Itu sebabnya saya memiliki pandangan ekstra ini di sini di sekitar input teks di tombol.
Kita tidak membutuhkan itu tetapi sekarang dengan tampilan bersarang itu, kita dapat mengontrol bagaimana dua item
ini disejajarkan satu sama lain, dengan menambahkan lagi properti style
di sini dan sekarang untuk tata letak, untuk penentuan posisi barang, Bereaksi Asli menggunakan flexbox yang juga mungkin Anda lakukan ketahui
dari web, jika Anda tidak, terpasang Anda akan menemukan sumber daya yang membantu Anda memulai dengan CSS flexbox.
Anda tidak perlu tahu flexbox masuk dan keluar tetapi itu membantu untuk mengetahui
sedikit tentang hal itu, flexbox berfungsi sedemikian rupa sehingga memposisikan elemen di dalam tampilan di samping satu sama lain atau
di atas satu sama lain, secara default di atas satu
sama lain di Bereaksi Asli dan Anda dapat mengubahnya dengan mengatur arah fleksibel dari kolom yang merupakan default
ke baris dan hanya dengan menambahkan ini, pada tampilan ini, kami menimpa default yang merupakan default yang
mengapa kami tidak harus mematikannya kolom dan sekarang sudah , kita akan melihat bahwa tombol di input
teks
duduk bersebelahan, belum terlihat bagus tetapi mereka duduk bersebelahan. Sekarang untuk membuatnya terlihat lebih baik, kami juga
dapat menambahkan lebih
banyak, misalnya Anda dapat menentukan bagaimana hal-hal diselaraskan dan didistribusikan di baris atau kolom mereka.
Misalnya dengan membenarkan konten, Anda dapat mengontrol bagaimana item didistribusikan di sepanjang sumbu utama dan dengan
baris, sumbu utama dari kiri ke kanan,
jika itu berupa kolom, sumbu utama akan dari atas ke bawah.
Jadi sekarang kita dapat menentukan nilai dan di sini IDE saya bahkan memberi saya pelengkapan otomatis yang sangat
nyaman, kita dapat menentukan nilai ruang antara misalnya. Artinya, semua ruang kosong yang tersisa ada di antara
dua elemen, jadi mereka sekarang
tidak duduk bersebelahan, tetapi ada ruang kosong di antara keduanya seperti yang
Anda tahu.
Sekarang kita juga dapat menyelaraskannya pada
sumbu silang mereka, jadi sumbu utama untuk baris arah fleks kiri ke
kanan, kemudian lintas silang adalah atas ke bawah. Untuk kolom arah lentur, sumbu utama akan dari atas ke bawah dan sumbu silang
akan kiri ke
kanan, sehingga sumbu silang adalah kebalikan dari sumbu utama sehingga bisa dikatakan. Ratakan posisi konten di sepanjang sumbu
utama, dengan menyelaraskan item, Anda dapat mengontrol bagaimana elemen anak dari tampilan ini disejajarkan di sepanjang sumbu silang
dan di sana Anda memiliki nilai yang berbeda, seperti misalnya pusat.
Jadi dalam hal ini, karena kita memiliki baris arah lentur, ini harus memusatkan secara vertikal semua item yang berarti bahwa tombol
sekarang terlihat lebih bagus dan hanya berpusat di tengah input ini. Nah dan sekarang kita juga bisa meningkatkan
lebar input itu sedikit dengan pergi ke input teks dan di
sana pada gaya, kita juga dapat menambahkan lebar katakanlah 200, untuk memberikan ini lebar 200 piksel
yang berarti bahwa ini sekarang sedikit lebih besar. Sebagai alternatif, Anda juga bisa memilih nilai
persentase seperti 80%, yang berarti bahwa ini membutuhkan 80% dari lebar yang tersedia yang
disediakan oleh komponen induknya, jadi oleh tampilan yang mengelilinginya. Dan sekarang dengan itu, kita telah melihat dasar-dasar penting pertama,
tentang meletakkan hal-hal di React Native dan menata hal-hal tetapi sekarang, kita melakukan semua itu dengan
konsep yang disebut gaya inline, yang berarti kita sedang menyiapkan gaya langsung pada elemen dan itu
tidak ideal.