Jadi kembali dalam kode, kita mulai dengan melemparkan beberapa pandangan di sini dan tentu saja sekarang, ini tidak akan berhasil, ini hanya
akan merusak atau tidak akan membuat apa pun yang berarti bagi layar. Dalam tampilan bersarang pertama di sini, di
blok ini,
saya pergi untuk memiliki input teks dan tombol. Mudahnya, keduanya disediakan oleh React Native, kami memiliki input teks
di sini dan kami juga memiliki komponen tombol. Jadi kita dapat mengimpor kedua input teks yang memungkinkan
pengguna untuk memasukkan teks dan tombol dan kemudian di sini dalam tampilan itu, dalam tampilan bersarang pertama, saya
akan menambahkan input teks sebagai tag penutup sendiri karena tidak ada yang bisa kami lewati antara pembukaan dan tag penutup dan untuk
tombol, Anda bisa berpikir
bahwa Anda menggunakan tombol seperti ini tetapi sebenarnya, itu bukan cara tombol Bereaksi Asli
ini,
melainkan tombol penutupan sendiri dan Anda mengatur properti judul untuk menentukan teks mana yang akan di render
di sana dan di sini, kita bisa mengatakan menambahkan. Sekarang kita memiliki input teks dan tombol di
sana dan jika kita menyimpan ini dan ini ulang, kita melihat tombol di sini tetapi kita tidak melihat input teks, kan?
Jadi itu tidak berfungsi sebagaimana dimaksud.
Alasannya sebenarnya karena input teks akan disembunyikan di sini di bawah bilah status.
Jadi sekarang adalah waktu di mana kita harus mulai dengan menambahkan beberapa tata letak, beberapa
struktur ke halaman ini karena hanya
menambahkan komponen saja tidak akan berhasil, aplikasi React Native adalah semua tentang menggunakan komponen
dan kemudian menambahkan tata letak yang tepat, hak struktur ke komponen Anda. Jadi di sini misalnya, akan masuk akal untuk menambahkan beberapa padding umum di sekitar
tampilan itu, jadi pada tampilan atas ini, jadi padding pada dasarnya adalah beberapa jarak dari perbatasan tampilan yang pada
dasarnya adalah bingkai perangkat dalam kasus
kami di sini karena saya berbicara tentang tampilan paling atas ke konten tampilan, sehingga beberapa jarak antara batas
paling atas, dari tampilan di sekitarnya dan konten dalam tampilan dan untuk itu, kita bisa menambahkan properti
gaya di sini pada tampilan.
Sebagian besar komponen dalam React Native mendukung properti style, tampilan tidak dan di sana, Anda menggunakan konten dinamis
yang mengikat di sini yang Anda tahu dari React normal juga dengan kawat gigi keriting
tunggal dan gaya mengharapkan objek Javascript sekarang. Jadi kami menambahkan sepasang kurung kurawal di sini dan
sekarang kesalahan umum adalah bahwa Anda pikir ini adalah sintaks khusus yang
membutuhkan kurung kurawal ganda, memang itu sintaks React normal dengan kurung kurawal yang serupa di mana kemudian
nilai dinamis yang Anda berikan ke gaya kebetulan menjadi objek
Javascript maka kita memiliki sepasang kurung kurawal. Dan di objek ini, Anda sekarang dapat
memiliki pasangan nilai kunci di mana kunci adalah nama properti gaya Anda dan nilai adalah nilai untuk
properti gaya ini dan nama properti gaya ini dipengaruhi oleh CSS.
Jadi di sini, yang dapat Anda lakukan adalah Anda dapat menambahkan padding, yang ada di React Native juga dan
daftar lengkap properti style yang didukung selalu dapat ditemukan dengan masuk ke komponen yang Anda gunakan, seperti
tampilan di sini dan kemudian dengan mengklik pada properti style dan di sini jika Anda mengklik pada style tampilan, Anda
akan melihat daftar semua properti yang disediakan yang dapat Anda gunakan dan Anda akan melihat beberapa properti khusus untuk tampilan di
sini dan kemudian beberapa alat peraga umum seperti alat peraga tata letak dan di sana, Anda akan menemukan padding misalnya.
Jadi begitulah cara Anda mengetahui apa yang didukung tetapi Anda juga akan melihat banyak contoh selama kursus ini.
Jadi di sini, saya menambahkan padding dan nilainya sekarang bisa saja berupa angka yang akan menjadi piksel independen
perangkat, jadi nilai piksel yang selalu terlihat bagus tidak peduli ukuran perangkat yang Anda miliki.
Jadi di sini, kita dapat menambahkan 10 dan jika kita melakukannya, sekarang kita melihat tombolnya sedikit lebih jauh ke
bawah, mungkin mari kita tambahkan 30 di sini sehingga kita dapat melihat perbedaan yang lebih besar
dan sekarang yang berfungsi dan sekarang jika Anda menekan di atas tombol, Anda tidak
benar-benar melihat input di sini tetapi Anda melihat bahwa keyboard lunak saya terbuka di Android, di iOS itu
tidak terbuka secara default tetapi di sana juga Anda
dapat mengetuk di sini dan jika Anda cukup sering mengetuk atau jika Anda pergi ke perangkat keras, keyboard yang beralih perangkat lunak keyboard, itu harus
terbuka di sana juga, jadi di sini
kita juga punya input.
Jadi sekarang kita dapat melihat input itu karena sekarang tidak lagi di belakang bilah status itu.
Jadi menambahkan padding itu mungkin masuk akal karena sekarang, kami memastikan bahwa tata letak kami ada di dalam
layar kami di sini.
Sekarang ada alat lain untuk memastikan kita memiliki cukup bantalan di sini juga,
tetapi untuk sekarang, mari kita secara manual mengatur bantalan dan mari kita mungkin mengaturnya ke nilai 30.
Jadi kita mulai dengan tata letak, sekarang mari
kita kembali ke komponen ini dan mari kita pastikan kita dapat melihat
sesuatu, kita dapat melihat bahwa ada input teks dan kita tidak hanya harus menebaknya.
Untuk ini, kita dapat pergi ke input teks dan di sana misalnya menambahkan prop placeholder dan seperti
sebelumnya untuk mengetahui apa yang
dapat Anda tetapkan, Anda selalu dapat pergi ke dokumen resmi, dalam hal ini ke dokumen input teks dan di sana, Anda menemukan deskripsi
cara menggunakannya dan beberapa contoh, tetapi
jika Anda menggulir ke bawah, Anda juga akan menemukan semua alat peraga yang dapat Anda atur dan di
sana misalnya, Anda mengetahui bahwa Anda dapat mengatur alat penampung, yaitu teks dummy yang ditampilkan sebelum pengguna
memasukkan beberapa teks.
Jadi di sini, itu membutuhkan string dan di sini kita bisa memasukkan tujuan kursus karena Anda harus dapat
menetapkan tujuan kursus
Anda di sini dan jika Anda melakukannya, Anda melihat keduanya di Android
dan di iOS ada teks tujuan kursus ini.
Sekarang tetap, itu bisa menjadi
sedikit lebih baik, bisa menjadi sedikit lebih jelas bahwa ada input teks dan oleh karena
itu di
sini, saya akan menambahkan gaya, gaya inline lain dan di sini saya akan mengatur batas warna bawah hitam, hitam sekarang adalah string, pintasan
warna seperti itu didukung dalam React Native dan daftar komprehensif semua warna yang tersedia terlampir pada
kuliah ini di sini dan saya juga dapat melihat bahwa lebar bawah batas katakanlah 1 dan apa yang dilakukan adalah
harus menetapkan dasar membatasi input ini sehingga sekarang jika kita kembali, kita menggarisbawahi di sini, kita
dapat melihatnya dengan jelas di iOS dan karena masih tidak ada banyak ruang di iOS, biarkan aku
benar-benar meningkatkan ini hingga 50 mungkin, ya itu terlihat lebih baik.
Jadi sekarang kita memiliki batas di bawah input kita dan yang membuatnya jelas bahwa ada input di sini.
Tentu saja Anda tidak dibatasi hanya mengatur perbatasan di bagian bawah,
Anda juga bisa hanya menetapkan batas
umum dengan meninggalkan bagian bawah di sini, warna perbatasan dan lebar
perbatasan dan jika Anda melakukannya, maka ini akan dikelilingi oleh berbatasan.
Sekarang satu catatan penting mengenai nama-nama gaya ini di sini, nama-nama properti gaya, Anda tentu saja melihat
bahwa itu adalah lebar perbatasan, warna batas yang ditulis seperti ini, dalam CSS normal, Anda akan memiliki warna batas dan
yang akan menerapkan warna perbatasan tetapi itu akan menjadi nama properti yang tidak valid di Javascript yang
mengapa ini tidak didukung.
Sekarang sebenarnya, nama properti yang valid dalam Javascript akan menjadi jika Anda membungkus ini dalam tanda
kutip meskipun tetapi bahkan itu tidak didukung dalam Bereaksi Asli, jadi sintaks alternatif ini, misalnya sintaks ini akan berfungsi dalam
Javascript jika Anda menerapkan beberapa gaya ke elemen HTML web , sintaks ini tidak didukung di Bereaksi Asli meskipun, di sana Anda benar-benar
harus menggunakan sintaksis unta ini di mana Anda misalnya menulis warna perbatasan seperti ini atau
singkatnya, Anda harus menggunakan nama properti yang juga Anda temukan di dokumen resmi, di sana tidak ada nama alternatif
untuk properti gaya ini dan kami sekarang juga bisa menambahkan padding di sini katakanlah 10 sehingga kami memiliki beberapa jarak antara perbatasan
dan bagian sebenarnya di mana kita memasukkan sesuatu dan saya akan mengatakan ini sudah terlihat jauh lebih
baik dan kami dapat dengan jelas melihat bahwa kami di sini memiliki input di mana pengguna dapat
memasukkan sesuatu.