Jadi, selangkah demi selangkah kami membuat kemajuan, yang tidak
dapat kami lakukan adalah memasukkan angka.
Yah saya kira secara teknis kita bisa memasukkan angka jika kita menemukan bidang input, ini dia tapi tidak terlalu
menyenangkan untuk mencarinya, akan lebih baik jika Anda bisa melihatnya, bukan?
Jadi karena itu mari kita gayakan bidang input
itu, bidang input teks di sini sedikit dan sama seperti sebelumnya sebenarnya, saya pergi untuk melakukannya dalam komponen yang
terpisah.
Jadi di folder komponen, saya akan menambahkan input saya sendiri. File js dan di sana, seperti biasa mengimpor Bereaksi dari Bereaksi dan
kemudian impor input teks dari Bereaksi Asli dan di sini saya sebenarnya tidak memerlukan tampilan karena
kita hanya akan memiliki input teks di sini dalam gaya dan dikonfigurasi di sana dan
kemudian memiliki konstanta input di sini yang merupakan komponen fungsional kami, yang pada akhirnya kami juga ekspor tentu saja dan satu hal
yang pasti kami perlukan adalah
stylesheet karena yang sekarang harus ditata di sini sehingga kami memiliki satu tampilan input default yang dapat
digunakan kembali dalam aplikasi jika kami membutuhkan banyak input di tempat yang berbeda dan
itu benar-benar pola
pikir yang harus Anda masuki, membuat komponen yang dapat digunakan kembali sehingga Anda
tidak perlu menyalin kode di sekitar atau mengulang sendiri tetapi Anda dapat dengan mudah berbagi komponen Anda
dan dengan mudah membuat aplikasi Anda inginkan dari set blok bangunan yang Anda buat sendiri pada akhirnya.
Jadi di sini, objek gaya saya dengan Stylesheet. buat, seperti itu, terlihat bagus dan sekarang di komponen itu,
saya ingin mengembalikan input
teks, jadi ini input teks bawaan.
Sekarang tentu saja, ide saya adalah bahwa kita
dapat mendesainnya dari sini, jadi mari kita menetapkan gaya dari sana tetapi seperti halnya dengan kartu, akan lebih baik jika kita juga dapat mengatur beberapa
gaya dari luar, seperti lebar khusus atau perbatasan khusus, semacam itu. Untuk mengaktifkannya, sekali lagi saya akan meneruskan objek
di sini ke gaya dan
untuk satu mengambil semua gaya saya diatur dalam objek gaya saya dan di sana katakanlah
di properti input yang belum kita tambahkan dan di samping itu, juga tambahkan semua gaya kita dapatkan dari gaya alat peraga sehingga kita
dapat mengatur gaya dari luar juga dan sekarang di sana di stylesheet, kita dapat
menambahkan gaya input untuk menetapkan beberapa gaya ke input. Jadi di sini, kita dapat memberikan ini tinggi katakanlah 30
yang seharusnya merupakan ketinggian yang terlihat relatif baik dan untuk melihat sesuatu, saya juga ingin menambahkan batas di bagian bawah.
Anda juga dapat menambahkan perbatasan di sekitar seluruh input dengan warna tepi dan lebar tepi dan sebagainya, tetapi
saya suka tampilan di mana kami hanya memiliki perbatasan di bawah input, tetapi itu tentu saja benar-benar subjektif
dan sesuatu yang dapat Anda atur sesuai dengan preferensi pribadi Anda. .
Batas di bagian bawah hanya dapat diatur dengan warna batas bawah dan di sana saya akan
pergi dengan abu-abu, warna pra-dibangun lain yang dapat kita gunakan dengan cara pintas itu dan memberikan batas bawah ini juga lebar di sini,
tambahkan margin vertikal dari 10 untuk memiliki jarak di sekitar input, setidaknya ke atas dan
bawah dan sekarang dengan itu, penataan dasar untuk
input teks ini
selesai, sekarang mari kita gunakan itu di layar permainan. Jadi di sana, saya ingin mengimpor input saya sendiri dari input
folder komponen, seperti itu dan mengganti input teks ini
di sini dengan input saya sendiri yang pada akhirnya membungkus input teks bawaan ini tentu
saja.
Jadi gunakan
input saya sendiri, singkirkan input input teks di sana yang tidak kita
perlukan lagi dan sekarang jika kita menyimpan ini, kita melihatnya sedikit tetapi sangat kecil, Anda hampir tidak dapat melihatnya di sini
di iOS dan itu semakin besar saat Anda mengetik yang tentu saja bukan yang kami inginkan.
Kita tentu saja tidak selesai,
alih-alih mengatur gaya lebarnya, saya akan
pergi ke layar mulai permainan,
jadi ke tempat di mana kita menggunakan input dan mengatur styling
di sini karena bagi saya masuk akal bahwa kita memiliki beberapa general gaya yang selalu
kita inginkan dalam komponen input, sesuatu seperti ketinggian atau batas tetapi beberapa gaya tertentu, seperti seberapa besar
seharusnya,
jadi seberapa luas seharusnya, itu adalah sesuatu yang ingin Anda
atur di tempat di mana Anda benar-benar menggunakan dan karenanya di sini, saya akan menambahkan properti input ini di objek stylesheet layar mulai permainan
dan mungkin menggunakan lebar 50 piksel di sini, yang seharusnya terlihat bagus dan menetapkannya ke input khusus saya di sini
dengan gaya prop.
Jadi di sana, kita sekarang bisa menunjuk ke gaya. input dan dengan itu, ia akan memiliki lebar itu setiap saat dan
jika kita mengetik di sana, kita tidak membuat itu
lebih luas lagi, alih-alih kita dapat dengan mudah gulir secara otomatis pada input itu.
Sekarang untuk input spesifik ini, untuk tata letak spesifik ini di sini, akan lebih baik jika teksnya
akan
dipusatkan, saya pikir, untuk sebagian besar input Anda ingin perilaku penulisan default dari kiri ke kanan dan
mulai dari tepi
kiri tetapi di sini saya pikir beberapa teks terpusat akan lebih baik dan oleh karena itu di layar permulaan permainan di mana
saya ingin memiliki pemusatan ini di sini, pada input
ini, kita juga dapat menambahkan properti pelurusan teks dan mengatur ini ke pusat dan sekarang ini akan memusatkan teks ini di
sini di tengah sebagai kami
mengetik dan itu sangat bagus untuk hanya memasukkan angka, seperti ini.
Omong-omong, saat ini kita dapat memasukkan apa pun
di sana, jadi kita tentu perlu mengkonfigurasi input ini dan untuk itu jika saya pergi
ke komponen input di mana kita menggunakan input teks, ada banyak hal yang dapat kita konfigurasi di sana
dan sebenarnya sumber daya terbaik selalu tentu saja dokumentasi resmi. Di sana di API API, jika Anda pergi ke sana dan
Anda mencari input teks, Anda akan menemukan tidak hanya penjelasan tetapi Anda juga akan menemukan semua alat peraga yang dapat Anda atur di
sana dan Anda dapat mengatur hal-hal seperti itu multiline atau
tidak , berapa lama teksnya.
Anda juga dapat mengatur teks
placeholder, Anda dapat mengatur koreksi otomatis dan semua hal yang menyenangkan, jadi
pastikan untuk memeriksa dokumen ini untuk menemukan properti spesifik yang mungkin Anda perlukan untuk use case Anda.
Saya ingin dapat mengatur alat peraga ini tetapi saya ingin dapat mengaturnya dari tempat
saya menggunakan input khusus saya. Jadi bukan dari sini karena itu akan memastikan bahwa kita
menggunakan konfigurasi yang sama untuk semua input
yang mungkin kita miliki di aplikasi kita, saya ingin memiliki lebih banyak fleksibilitas dan hanya mengatur beberapa styling dasar di sini
dan mengkonfigurasi input di tempat di mana kita kemudian gunakan itu bukan dalam komponen bungkus inti.
Yang keren adalah Bereaksi dan itu bukan Bereaksi Asli, itu hanya Bereaksi di Javascript normal memiliki sintaks
untuk itu.
Anda dapat mengambil alat peraga yang Anda dapatkan dan menyebarkannya pada komponen Anda seperti ini.
Sintaksnya mungkin terlihat sedikit aneh tetapi pada akhirnya yang dilakukan adalah mengambil semua
properti yang Anda miliki, semua properti yang Anda atur di sini dan pada dasarnya menambahkannya ke komponen Anda sebagai properti.
Sekarang jika Anda kemudian mendefinisikan alat peraga lain seperti gaya dan Anda sudah punya gaya di
sini, gaya ini akan menimpa gaya yang Anda
punya di sini dan itu sebenarnya yang saya inginkan karena jika saya menetapkan alat peraga gaya pada masukan
saya sendiri dari luar, saya pasti ingin menimpa ini dengan gaya prop ini dan menambahkan gaya ini yang diatur di sana untuk
input teks
ini tetapi jika Anda mengatur properti lain di luar komponen ini, maka pada komponen kustom saya, maka mereka akan
ditambahkan ke input teks dan memungkinkan kita untuk menambahkan semua alat peraga yang dapat kita tambahkan pada input teks
juga pada input kita, begitu juga pada komponen kita sendiri.
Jadi di sini di mana kita menggunakan input, kita sekarang tidak hanya dapat menambahkan gaya tetapi kita juga dapat menambahkan blurOnSubmit misalnya
untuk memastikan bahwa ketika kita menekan tombol kirim di sana, kita kehilangan
fokus dan kita menutup keyboard lunak. Kami dapat mengatur secara otomatis untuk tidak ada yang merupakan salah satu nilai yang
diizinkan di sana jika Anda memeriksa dokumen. Anda dapat mengaturnya agar tidak ada, kalimat,
kata-kata dan sebagainya, jadi saya tidak ingin kapitalisasi dihidupkan di sini karena kami hanya akan memasukkan angka tetapi juga
karena saya ingin menunjukkan kepada Anda berbagai konfigurasi yang dapat Anda atur. Saya akan mengatur koreksi otomatis di sini ke
false sehingga kami tidak mengoreksi input pengguna secara otomatis dan sangat penting
di sini, saya akan mengatur jenis keyboard menjadi numerik, sehingga pengguna harus memasukkan nomor di sini.
Saya akan mengatur panjang maks di sini menjadi 2 sehingga Anda hanya dapat memasukkan dua digit dan bukan angka yang sangat panjang
karena game ini di sini dan itu hanya salah satu batasan yang saya miliki di sini, adalah bahwa game ini hanya
bekerja dengan dua digit jumlah. Dengan semua itu diatur, sekarang
jika kita kembali dan saya beralih keyboard lunak saya, Anda melihat Anda mendapatkan nomor keyboard di sini dan Anda
hanya dapat memasukkan dua digit di sana dan tidak lebih dari itu, yang tentu saja persis apa yang saya inginkan.
Selain itu, di sini di Android kita melihat ini, jika Anda mengklik tombol
konfirmasi, ini akan menutupnya, itu berkat hal blurOnSubmit. Di iOS, tombol seperti itu tidak ada di sini, jadi di sana,
kita harus mencari solusi berbeda untuk menutup ini jika Anda mengetuk di tempat lain misalnya karena saat
ini, itu tidak terjadi.
Tetapi hal baiknya adalah kita sekarang memiliki keyboard yang bisa kita lihat dan keyboard tempat kita bisa memasukkan angka.
Satu hal yang ingin saya ubah adalah saat ini, saya juga dapat memasukkan pemisah desimal di sini.
Sekarang untuk menghilangkan itu, Anda dapat mengubah jenis keyboard ke papan nomor dan untuk melihat semua jenis keyboard yang tersedia, seperti biasa dokumen
resmi adalah tempat untuk pergi, di sana untuk input teks, Anda dapat menyelam ke dalam jenis keyboard dan
menemukan tentukan apa yang dapat Anda atur, apa yang berfungsi pada semua platform dan apa yang dapat
Anda atur jika Anda ingin memeriksa yang memeriksa platform mana yang Anda jalankan kode yang belum kita
pelajari.
Panel angka didukung di kedua platform dan jika Anda mengatur
ini, Anda sekarang memiliki input di mana Anda tidak dapat memasukkan tempat desimal di sini, jika Anda mengetik
di sini dan Anda tidak dapat melakukannya di iOS. Di Android, Anda sayangnya dapat melakukannya, jadi di sana
kami juga harus menemukan perbaikan yang berbeda.