Jadi sekarang dengan langkah-langkah dasar pertama yang diambil, jika saya sekarang mengisi angka di sini dan kami melanjutkan, ini
semua terlihat bagus untuk saya di sini,
ini semua bekerja, jika kita sekarang memulai permainan,
maka saya juga ingin mengurangi jarak yang kita miliki ini di sini dan saya juga ingin memastikan bahwa kotak saya ada di
bawah
sana, jadi ini tebakan tebakan yang kita miliki, bahwa ini juga
terlihat lebih baik.
Nah, itu adalah sesuatu yang bisa kita lakukan di layar game tentu saja karena itulah layar yang saat
ini kita lihat di sana.
Sekarang untuk satu saja, ini adalah jarak, margin atas ini di wadah bawah kami yang merupakan wadah ini, margin atas adalah jarak antara
angka di sini dan wadah dan saya ingin mengubah ini. Sekarang untuk mengubah ini, kita
dapat
kembali menggunakan dimensi API.
Jadi di sini, saya kembali mengimpor dimensi dari Bereaksi Asli dan sekarang di
sana, kita dapat menghitung margin ini secara dinamis. Apa yang dapat kita lakukan di sini adalah kita dapat kembali mendapatkan
dimensi jendela kita dan kemudian di sini, lebar atau dalam hal ini, mungkin tinggi dan kemudian
membaginya dengan sesuatu tetapi ini akan sangat rumit, kita dapat membaginya dengan 20 misalnya , pada 20 dan melihat apakah itu
terlihat bagus tapi ini benar-benar permainan menebak, mungkin bukan yang kita inginkan.
Alih-alih, kami dapat memeriksa berapa tinggi yang kami miliki dan kemudian menggunakan
jarak yang berbeda berdasarkan itu. Kita dapat memeriksa apakah tinggi badan kita katakanlah lebih besar dari 600, jika itu
masalahnya, kita ingin memiliki jarak 20, jika tidak kita memiliki satu dari 10. Jadi kita juga dapat menggunakan dimensi yang kita
hitung dalam kondisi if, dalam hal ini dalam ekspresi ternary di sini, tetapi Anda
dapat menggunakannya dalam normal jika memeriksa juga.
Jadi sekarang kita bisa kembali ke sini dan apa yang sekarang kita lihat adalah bahwa ketika kita memulai permainan, kita tidak memiliki celah
yang besar di sini di layar yang lebih kecil, pada iPhone yang merupakan layar yang lebih besar, kita pasti
memiliki celah yang lebih besar dan untuk melihat lebih jelas, Anda tentu saja bisa bermain-main
dengan itu dan misalnya menggunakan 30 untuk layar yang lebih kecil dan 30 untuk layar yang lebih besar dan 5 untuk layar yang lebih
kecil dan sekarang Anda pasti harus melihatnya.
Di sini kita memiliki celah kecil dan
di sini, kita memiliki celah yang lebih besar.
Jadi kita juga bisa menggunakan ini dalam kondisi if.
Sekarang dengan itu, saya akan mengatur ini kembali ke 20 dan 5 di sini tapi ini sekarang mudah-mudahan juga menunjukkan cara lain
untuk menggunakan ini.
Anda dapat menggunakan ini jika kondisi yang tentu saja memberi Anda banyak fleksibilitas dalam kasus
di mana Anda tidak ingin menggunakan lebar dalam perhitungan dinamis tetapi Anda memiliki nilai hardcoded yang berbeda yang ingin Anda
gunakan berdasarkan pada breakpoints berbeda yang Anda ingin set, sedikit seperti yang Anda ketahui dari CSS di mana Anda juga
memiliki kueri media dan kemudian Anda dapat membuat hal yang berbeda berdasarkan kueri media
yang berbeda.
Anda juga tidak dibatasi untuk menggunakan dimensi API di sana di stylesheet Anda, tentu saja, Anda dapat menggunakannya di mana saja di mana Anda
dapat menggunakan Javascript, jadi di mana saja pada komponen Anda pada dasarnya. Anda juga dapat melampirkan gaya yang sama sekali
berbeda berdasarkan lebar atau tinggi yang tersedia. Kita juga dapat menggunakan dimensi dapatkan
jendela di sini di mana saya menetapkan gaya saya dan misalnya, periksa tinggi badan saya di sini, periksa apakah itu
lebih besar dari 600 dan jika itu yang terjadi, gunakan wadah gaya tombol dan sebaliknya, gunakan wadah gaya
tombol kecil jika kita punya ini kelas. Saya tidak memilikinya di sini, jadi saya akan menyingkirkan itu, tetapi itu cara lain
untuk menggunakan ini, Anda dapat menggunakannya di mana saja di mana Javascript berjalan. Anda juga tentu saja dapat menggunakannya di sini,
Anda dapat memiliki jika periksa di sini tepat sebelum Anda mengembalikan kode JSX Anda dan memeriksa dapatkan tinggi jendela, jika itu lebih besar dari 600 dan
jika itu kasusnya katakanlah, Anda mengembalikan kode JSX yang sama sekali berbeda dan
karena itu kode ini setelah itu tidak akan pernah berjalan jika Anda kembali ke sini dan hanya jika Anda
tidak membuatnya menjadi
ini jika memeriksa, jadi jika Anda memiliki perangkat yang tidak setinggi ini, maka Anda membuatnya di sana.
Jadi Anda benar-benar fleksibel di sini dan gunakan fleksibilitas itu untuk membangun tata letak yang Anda inginkan karena ini adalah
tentang semua ini dan apa yang memberi Anda banyak fleksibilitas untuk aplikasi Anda.
Jadi itu jarak di
sini, sekarang saya juga ingin mengubah item log saya di sana, itu juga
sesuatu yang bisa kita lakukan dengan mudah.
Kami memiliki item daftar kami di sana dan pada item daftar, kami menetapkan lebar 100% karena kami mengatur lebar daftar
kami di sini dengan wadah daftar dan itu diatur ke 60%.
Sekarang 60% terlihat cukup bagus di perangkat yang lebih besar saya pikir tetapi pada
perangkat yang lebih kecil, kita bisa lebih besar dari itu.
Sekarang kita tentu saja dapat mencoba lagi untuk menyelesaikan ini dengan aturan yang berbeda di sini di mana kita menetapkan lebar maks
dan lebar min dan mungkin juga menggunakan dimensi API untuk menghitung ini secara dinamis atau kita lagi menggunakan centang jika.
Di sini kita bisa lagi mengatakan dimensi dapatkan jendela, dapatkan lebar yang tersedia dalam kasus ini dan jika
itu katakanlah lebih besar dari 500, maka saya
ingin menggunakan 60%, kalau tidak saya ingin menggunakan 80%. Jadi sekarang kita cukup membuat wadah yang lebih luas, daftar yang
lebih luas berdasarkan lebar yang tersedia pada perangkat
yang kita
jalankan dan mari kita benar-benar menggunakan 350 di sini mungkin bukan 500 karena kita berbicara
tentang lebar, bukan tentang tinggi.
Jadi sekarang di sini jika kita menjalankan ini pada iPhone, kita harus memiliki lebar yang sama seperti sebelumnya tetapi pada layar yang lebih
kecil, kita memiliki item yang lebih besar.
Jadi itu juga sesuatu yang bisa kita lakukan dan tentu saja Anda bisa bermain-main dengan breakpoint yang
Anda setting secara efektif di sini.
Anda dapat mencoba berbagai ukuran breakpoint di sini.
Tentu saja Anda juga dapat memiliki beberapa breakpoint,
Anda dapat memiliki ekspresi ternary bersarang di sini atau sebelum Anda menulis terlalu banyak ekspresi bersarang, cukup mengatur objek gaya yang berbeda
di sini yang kemudian Anda muat dengan berbeda jika cek yang Anda gunakan di sana. Sekedar memberi contoh untuk ini, kita
bisa memiliki daftar kontainer besar di sana-sini, kita atur yang fleksibel dan kita atur
lebar misalkan 80% karena ini yang besar dan di sini
kita punya yang normal dengan 60% .
Sekarang saya tidak punya kondisi jika di sana tetapi saya memiliki dua objek gaya yang
berbeda dan sekarang kita hanya perlu melampirkan objek gaya yang berbeda
di sana, tidak di sini tapi di sini tentu saja, pada pandangan ini. Nah, untuk melakukan ini, kita cukup mengatur variabel gaya kontainer daftar di
sini misalnya dan menunjuk pada daftar gaya kontainer yang merupakan standar kita tetapi kemudian menambahkan tanda centang di sini di
mana kita memeriksa apakah dimensi mendapatkan lebar jendela dan sekarang jika lebar di sini adalah katakanlah lebih kecil dari 350, jadi jika kita
memiliki perangkat kecil, maka kita ingin memiliki wadah daftar besar, maka kita dapat mengatur
gaya wadah daftar,
variabel ini sama dengan wadah gaya daftar
besar untuk menunjuk pada objek gaya ini dan sekarang kita dapat menggunakan objek gaya di sini pada
tampilan di mana kita memerlukan gaya kontainer daftar, kita menggunakan variabel sekarang yang menyimpan objek
gaya kontainer daftar berbeda berdasarkan lebar perangkat kita. Dan jika kita sekarang menyimpan ini dan menjalankan ini lagi, Anda
melihat bahwa pada iPhone dengan perangkat yang lebih besar di mana kami memiliki lebih banyak lebar, kami mendapat wadah yang lebih kecil dan di sini
di ponsel Android dengan perangkat yang lebih kecil, dengan lebar yang lebih sedikit, kami mendapatkan wadah yang lebih besar.
Jadi ini hasil yang sama seperti sebelumnya tetapi
sedikit lebih mudah dibaca dan sekarang kita dapat memiliki beberapa seperti jika memeriksa di sini di mana
kita menyimpan gaya yang berbeda di sini dalam gaya
wadah daftar yang kemudian kita gunakan di sana, ini bisa lebih mudah dibaca daripada memiliki ekspresi ternary bersarang di sana di objek stylesheet Anda.
Jadi ini adalah bagaimana Anda dapat bermain-main dengan itu dan menyadari bahwa fleksibilitas dimensi API sangat
penting di sini.