1 00:00:02,310 --> 00:00:09,750 Sekarang ada satu hal tambahan ketika membuat aplikasi mobile untuk ponsel modern, kita bisa 2 00:00:09,810 --> 00:00:13,880 melihat ini di iPhone yang saya putar. 3 00:00:13,890 --> 00:00:14,520 Baik. 4 00:00:14,580 --> 00:00:19,380 Dan lekukan ini terkadang dapat menumpuk konten Anda. 5 00:00:19,380 --> 00:00:26,010 Hal yang sama berlaku untuk bilah indikator Task Manager layar utama di sini di bagian bawah pada iPhone. 6 00:00:26,010 --> 00:00:32,280 Anda lihat itu tumpang tindih tombol permainan baru kami dan ya saya bisa gulir ke atas tetapi memantul kembali dan 7 00:00:32,370 --> 00:00:33,990 selalu di atas tombol itu. 8 00:00:33,990 --> 00:00:40,370 Jadi ini adalah elemen-elemen yang merupakan bagian dari yang bijak yang dapat merusak antarmuka kita. 9 00:00:40,380 --> 00:00:47,310 Misalnya jika kami telah meninggalkan teks yang disejajarkan, mungkin tumpang tindih dengan takik ini atau dalam hal ini adalah tombol layar beranda di 10 00:00:47,370 --> 00:00:48,930 mana teks itu berada. 11 00:00:49,290 --> 00:00:54,250 Nah, task manager adalah bar indikator yang tumpang tindih dengan konten kami. 12 00:00:54,660 --> 00:00:57,090 Dan tentu saja bukan itu yang terjadi pada iPhone. 13 00:00:57,090 --> 00:00:59,760 Anda bisa memiliki masalah serupa di perangkat Android. 14 00:00:59,780 --> 00:01:04,080 Di sana Anda juga memiliki perangkat dengan takik atau dengan yang seperti itu. 15 00:01:04,140 --> 00:01:11,640 Sekarang untuk memastikan bahwa aplikasi Anda selalu terlihat bagus di semua perangkat yang berbeda Bereaksi Asli 16 00:01:11,640 --> 00:01:19,680 memiliki komponen khusus, Anda dapat menggunakan komponen yang secara otomatis menyesuaikan konten Anda agar sesuai dengan layar 17 00:01:19,680 --> 00:01:23,830 perangkat Anda dan menghormati takik dan hal-hal lain. 18 00:01:23,850 --> 00:01:29,280 Jadi misalnya di sini di game over screen di mana saya memiliki masalah ini di iPhone kita 19 00:01:29,310 --> 00:01:33,750 dapat mengimpor komponen khusus ini React Native offers dan itulah tampilan area aman. 20 00:01:34,080 --> 00:01:41,640 Ini disebut seperti ini karena ini adalah tampilan pembungkus yang dapat kita tempatkan di sekitar konten kita yang 21 00:01:41,780 --> 00:01:50,430 menandai area aman di mana kita dapat memposisikan konten kita karena di sana kita tidak akan memiliki masalah dengan takikan 22 00:01:50,460 --> 00:01:51,660 dan sebagainya. 23 00:01:51,660 --> 00:01:53,770 Sekarang bagaimana Anda gunakan untuk menghemat area. 24 00:01:53,780 --> 00:01:57,590 Anda cukup mengambil dan membungkusnya di sekitar konten Anda. 25 00:01:57,600 --> 00:02:04,710 Jadi di sekitar tampilan gulir kami di sini misalnya, kami dapat membungkus semua itu di layar 26 00:02:04,710 --> 00:02:08,660 permainan dengan tampilan area aman dan itu penting. 27 00:02:08,660 --> 00:02:12,640 Tampilan Area Aman harus selalu membungkus tampilan teratas Anda. 28 00:02:12,650 --> 00:02:17,170 Jadi dalam hal ini tampilan gulir di sini jadi sekarang adalah aman. 29 00:02:17,180 --> 00:02:26,140 Jika kita kembali dan kita melalui permainan kita sangat cepat di sini di iPhone memulai permainan baru lima puluh lima adalah 30 00:02:26,140 --> 00:02:28,480 angka dan menyelesaikan ini maka 31 00:02:33,070 --> 00:02:38,200 apa yang Anda lihat adalah sesuatu yang menarik masalah menjadi lebih buruk. 32 00:02:38,200 --> 00:02:45,910 Nah sebelum kita berhati-hati tentang hal ini, harap perhatikan bahwa bilah gulir yang Anda lihat di sini di sebelah 33 00:02:45,910 --> 00:02:48,040 kanan sekarang sebenarnya sedikit menjorok. 34 00:02:48,040 --> 00:02:53,500 Ini tidak sepenuhnya di kanan dan yang sudah d area tampilan aman memiliki 35 00:02:53,500 --> 00:03:01,840 beberapa efek yang menambahkan beberapa padding di sebelah kiri dan kanan untuk memastikan bahwa kita menghormati de notch yang akan 36 00:03:01,840 --> 00:03:09,730 mengambil beberapa ruang di sana dan memberi kita beberapa padding bahwa konten kami jelas tidak tumpang tindih oleh takik. 37 00:03:09,730 --> 00:03:13,030 Tapi tentu saja kita punya masalah di sana di bagian bawah. 38 00:03:13,030 --> 00:03:18,040 Alasan untuk itu adalah bahwa saya tidak benar-benar menggunakan tampilan area simpan sebagai tampilan teratas saya. 39 00:03:18,040 --> 00:03:22,930 Jadi mari kita hapus dari sana dari game over screen karena apa pandangan utama kita. 40 00:03:23,020 --> 00:03:26,190 Nah itu di file aplikasi catur pada akhirnya di sana. 41 00:03:26,230 --> 00:03:33,750 Kami memiliki konten kami, tampilan ini di sini, di mana kami harus tajuk dan lalu pemirsa mana pun yang memuat. 42 00:03:33,770 --> 00:03:39,100 Jadi misalnya tajuk bukan bagian dari tampilan area simpannya dan itu seharusnya. 43 00:03:39,110 --> 00:03:49,130 Jadi mari kita impor Area Aman lihat di sini di file aplikasi jazz dan mari kita bungkus tampilan ini di sini dengan itu seperti itu jadi sekarang 44 00:03:49,130 --> 00:03:49,550 dengan 45 00:03:52,480 --> 00:03:58,760 ini mari kita simpan dan mari kita lihat nomor dengan menunggu aplikasi untuk memuat ulang dan 46 00:03:58,850 --> 00:04:02,750 apa yang kita lihat adalah kosong Layar sekarang solusinya sederhana. 47 00:04:02,780 --> 00:04:08,360 Mari kita ambil gaya yang kami terapkan pada Anda ini dan berlaku untuk area Simpan Anda dan sekarang singkirkan tampilan 48 00:04:08,380 --> 00:04:08,980 lain ini. 49 00:04:08,990 --> 00:04:15,090 Karena sekarang ini hanya menggantikan pandangan normal kita di sini dan sekarang tidak berfungsi dan sekarang mari 50 00:04:15,180 --> 00:04:19,590 kita pergi untuk permainan itu lagi mari kita cepat menyelesaikan ini 51 00:04:23,720 --> 00:04:28,160 apa yang sekarang Anda lihat sudah mati di sini di bagian bawah. 52 00:04:28,160 --> 00:04:30,960 Kami sekarang memiliki beberapa jarak ekstra di antara itu. 53 00:04:31,100 --> 00:04:36,700 Saya ingin pergi ke bilah pengelola tugas di sini dan tombol permainan baru yang sebelumnya tidak kami miliki. 54 00:04:36,740 --> 00:04:42,350 Kami juga memiliki spasi di sebelah kiri dan kanan di sini untuk menghormati takik sehingga konten ini tidak pernah tumpang 55 00:04:42,350 --> 00:04:42,790 tindih. 56 00:04:42,800 --> 00:04:48,690 Kita mungkin ada di sebelah kiri sana dan kita punya bantalan tambahan di bagian atas dan bawah. 57 00:04:48,770 --> 00:04:56,180 Sekarang tentu saja tajuk kami tidak terlihat super cantik dengan spasi tambahan ini di sini dan itu sebenarnya sesuatu yang 58 00:04:56,180 --> 00:05:01,270 akan kami rawat dalam modul navigasi atau sebenarnya kami akan dijaga untuk kami. 59 00:05:01,280 --> 00:05:05,690 Kita tidak perlu melakukan banyak hal di sana, tetapi sekali lagi ini bukan sesuatu yang harus kita khawatirkan. 60 00:05:05,690 --> 00:05:11,460 Karena itu, yang dapat kami khawatirkan adalah bahwa konten kami selalu terlihat dan dengan 61 00:05:11,460 --> 00:05:14,210 area aman Anda, Anda dapat memastikannya. 62 00:05:14,210 --> 00:05:20,050 Sekarang bukan berarti Anda harus membungkus semua konten Anda atau seluruh aplikasi Anda di tampilan area 63 00:05:20,060 --> 00:05:26,930 aman sepanjang waktu seperti yang akan Anda lihat dalam modul berikutnya ketika kita semua berbicara tentang navigasi di banyak aplikasi 64 00:05:26,930 --> 00:05:33,800 yang sebenarnya akan Anda gunakan perpustakaan yang menangani masalah ini dalam banyak kasus untuk Anda perpustakaan navigasi akan digunakan 65 00:05:33,830 --> 00:05:34,700 di sana. 66 00:05:34,940 --> 00:05:39,980 Jadi di banyak aplikasi karena sebagian besar aplikasi Anda akan memiliki navigasi Anda tidak perlu mengelola 67 00:05:39,980 --> 00:05:40,790 secara manual. 68 00:05:40,940 --> 00:05:46,460 Tetapi jika Anda membuat aplikasi di mana Anda tidak memiliki perpustakaan lain yang menangani hal ini seperti 69 00:05:46,460 --> 00:05:52,760 aplikasi ini di sini, Anda keberatan ketika saya mempertimbangkan untuk membungkus konten Anda dengan tampilan save area jika kontennya tumpang 70 00:05:52,760 --> 00:05:53,420 tindih.