Sekarang kami memiliki masalah lain dalam aplikasi ini di sini karena setelah semua ini diselesaikan di sini,
jika kita cepat pergi ke sana, pastikan bahwa kita
menyelesaikan ini, maka kita memiliki layar ini dan layar ini juga rusak.
Kami punya dua masalah
di sini sebenarnya, satu adalah bahwa layar tidak dapat digulir yang bukan masalah pada perangkat yang
lebih besar di mana kami memiliki lebih tinggi tetapi di sini, kami tidak dapat memeras semua konten
di layar, jadi kami mungkin ingin membuatnya dapat digulir hanya untuk menjadi aman dan / atau sebagai alternatif, kami memastikan bahwa kami dijamin
untuk memasukkan semuanya ke layar dan dijamin bahwa ini adalah masalahnya, kami harus pergi ke permainan di atas layar dan
menghitung ketinggian kami di sini secara dinamis, terutama ketinggian gambar di sini yang saat ini kami buat dengan hardcoding hingga 300
piksel yang terlalu besar pada perangkat kecil.
Sekarang Anda sudah belajar tentang solusi untuk
itu, kita dapat kembali menggunakan dimensi API dengan mengimpornya dari React Native dan dengan dimensi yang diimpor,
kita dapat pergi ke stylesheet kita dan pada wadah gambar, kita sekarang dapat mengatakan dimensi mendapatkan lebar jendela dan sekarang katakanlah
untuk wadah gambar, untuk gambar di sini, kami ingin memiliki lebar mungkin 70% dari lebar yang tersedia dan kami ingin memiliki nilai yang
sama dengan ketinggian, jadi saya hanya akan menyalinnya
di sana.
Penting di sini, kami tidak menggunakan ketinggian karena gambar tidak boleh 70% dari tinggi kami yang
tersedia,
melainkan harus memiliki tinggi yang sama dengan lebar dan itu dihitung pada lebar perangkat,
jadi kami menggunakan lebar di sana demikian juga. Sekarang di sini radius perbatasan harus setengahnya, jadi kita bisa menggunakannya
di sini juga dan membaginya menjadi dua dan kita akan memiliki radius perbatasan yang sempurna untuk lebar yang
dihitung secara dinamis itu. Jadi itu satu hal penting.
Sekarang kami juga punya beberapa ukuran lain yang kami siapkan, seperti margin vertikal di sini yang
kami hardcode ke 30, sama untuk wadah hasil dan kami mungkin ingin mengubahnya juga. Jadi di sini kita juga bisa mengatakan dimensi mendapatkan
jendela, dalam hal ini tinggi dan mungkin membaginya
dengan katakanlah 20 dan lihat apakah itu terlihat bagus dan juga ada margin vertikal, mungkin bagi ini dengan 40 karena
itu 15, ini 30, jadi mari kita bagi ini dengan 40, jika
kita membaginya dengan 20 untuk memiliki hubungan yang sama antara kedua
vertikal margin ini lagi.
Jadi mari kita
selesaikan ini lagi dan mari kita lihat apa hasilnya, lebih baik, sekarang setidaknya
kita bisa melihat tombolnya tetapi masih belum sempurna.
Margin ini di sini tentu masih terlalu besar dan juga ukuran font, kita bisa menyusutkan ini juga.
Jadi gambar yang lebih bulat, kita dapat membagi tinggi dengan 30 di sini untuk margin ini
kita sedang mengatur dan kemudian pergi ke 60 untuk margin hasil kontainer vertikal ini dan untuk ukuran font di
sini, di sini kita dapat menggunakan jika memeriksa apakah kita ingin dan misalnya memeriksa ketinggian kami yang tersedia di sini dan jika itu katakanlah lebih
kecil dari 400, maka kami menggunakan 16 di sini dan sebaliknya, kami menggunakan 20. Sekarang yang terakhir tetapi tidak kalah penting untuk memastikan bahwa kita dapat
menggulir karena kadang-kadang dengan semua penyesuaian, kita masih tidak dapat memasukkannya ke layar,
setidaknya tidak tanpa membuat semuanya super kecil, kita
mungkin ingin mengimpor gulir itu lihat di sini dan bungkus tampilan kita dengan itu, jadi tambahkan
tampilan gulir di sini di sekitar tampilan kita untuk membuat itu dapat digulir dan sekarang mari
kita lihat ini lagi,
mari
selesaikan ini, sekarang ini terlihat lebih baik. Ini pas di layar dan jika perlu, kita juga akan dapat
menggulirnya, kita dapat melihat bahwa di iPhone by the way, di
sana jika kita menyelesaikan ini, pada iPhone kita
selalu dapat menggulirkan sedikit dan memantul kembali, kami telah mengaktifkan scrolling dan oleh karena itu
sekarang ini terlihat bagus di iPhone tetapi juga pada perangkat ini di mana kami mengurangi ukuran font sedikit, bekerja
pada spasi di sini sedikit dan jika itu akan melampaui
batas kami, maka kami bisa gulir, jadi kami akan selalu dapat berinteraksi dengan game kami. Jadi itulah dimensi API di sini dan dimensi API benar-benar membantu kami
membangun antarmuka pengguna yang terlihat bagus pada ukuran perangkat yang berbeda dan saat Anda belajar, ada berbagai cara
menggunakannya - untuk menghitung ukuran secara dinamis, baik untuk lebar atau tinggi atau margin dan juga tentu saja jika
pernyataan untuk hanya membuat konten yang berbeda, melampirkan gaya yang berbeda atau objek gaya yang berbeda berdasarkan
kondisi lebar atau tinggi yang Anda atur di sini tapi itu tidak semua
karena pengguna juga dapat mengubah orientasi perangkat saat aplikasi berjalan dan itu juga terkadang berarti
bahwa kita perlu mengubah gaya dan / atau tata letak.