1 00:00:02,230 --> 00:00:08,380 Jadi kami memiliki tampilan detail pada dimensi, orientasi, dan render berbagai gaya dan tata letak berdasarkan lebar 2 00:00:08,380 --> 00:00:14,030 dan tinggi yang tersedia dan juga bagaimana bereaksi terhadap perubahan lebar dan tinggi ketika Anda 3 00:00:14,080 --> 00:00:17,010 memutar perangkat, misalnya, hal-hal yang sangat penting. 4 00:00:17,680 --> 00:00:22,900 Mari sekarang kita lihat bagaimana Anda dapat membuat gaya atau tata letak yang berbeda atau apa pun 5 00:00:23,080 --> 00:00:25,660 yang Anda inginkan berdasarkan platform yang Anda jalankan. 6 00:00:25,660 --> 00:00:31,120 Saat ini kami pada dasarnya memiliki aplikasi yang identik di iOS dan Android dengan satu pengecualian dan itulah tombol 7 00:00:31,120 --> 00:00:32,240 kami di sini. 8 00:00:32,320 --> 00:00:38,320 Tombol-tombolnya terlihat berbeda karena komponen tombol yang kami gunakan adalah komponen yang dimasukkan ke React Native dan 9 00:00:38,320 --> 00:00:46,060 itu adalah salah satu yang sangat langka, sebenarnya satu-satunya komponen React Native yang menawarkan penyesuaian secara otomatis berdasarkan platform yang dijalankan oleh 10 00:00:46,060 --> 00:00:49,310 aplikasi Anda, tidak lain komponen benar-benar melakukan itu tetapi 11 00:00:49,390 --> 00:00:56,290 tentu saja, Anda dapat menulis kode untuk menyesuaikan gaya Anda, tata letak logika, apa pun yang Anda inginkan berdasarkan 12 00:00:56,320 --> 00:01:01,000 pada platform yang Anda jalankan. Untuk melihat contoh, mari kita pergi ke 13 00:01:01,000 --> 00:01:04,170 komponen tajuk kami dan di sana, mari kita bekerja pada 14 00:01:04,180 --> 00:01:08,020 cara kami menyajikan tajuk ini. Di Android kita mungkin 15 00:01:08,020 --> 00:01:12,810 memiliki warna latar belakang ini dan kemudian teks di depannya, di iOS 16 00:01:12,820 --> 00:01:19,240 kita mungkin ingin memiliki warna latar belakang putih dan hanya memiliki batas tipis di bagian bawah 17 00:01:19,240 --> 00:01:21,750 dan alih-alih memiliki teks dalam warna 18 00:01:21,760 --> 00:01:25,270 utama kita, yang akan menjadi Terlihat lebih khas iOS. 19 00:01:25,360 --> 00:01:31,810 Sekarang untuk mencari tahu di platform mana Anda menjalankan, React Native telah Anda liput, ia memiliki 20 00:01:32,110 --> 00:01:37,630 objek platform di mana dimensi membantu Anda mengetahui dimensi perangkat yang Anda jalankan, 21 00:01:37,630 --> 00:01:41,750 platform membantu Anda mengetahui platform perangkat Anda sedang berlari. 22 00:01:41,910 --> 00:01:45,270 Jadi sekarang di sini dalam gaya yang Anda buat, 23 00:01:45,270 --> 00:01:48,660 kita bisa membuat warna latar belakang yang berbeda berdasarkan itu. 24 00:01:48,810 --> 00:01:53,310 Kami dapat menggunakan platform dan sekarang di sana, Anda memiliki beberapa properti 25 00:01:53,310 --> 00:02:01,170 yang dapat Anda gunakan dan misalnya Anda memiliki properti OS dan OS pada dasarnya adalah sistem operasi dan itu adalah salah satu 26 00:02:01,170 --> 00:02:02,220 nilai yang 27 00:02:02,220 --> 00:02:05,670 Anda lihat di sini, yang paling penting iOS atau Android. 28 00:02:05,700 --> 00:02:12,000 Jadi di sini kita dapat memeriksa apakah itu sama dengan katakanlah Android dan dalam hal ini, saya mengatur 29 00:02:12,000 --> 00:02:13,570 warna latar belakang saya 30 00:02:13,770 --> 00:02:20,130 ke warna primer tetapi jika itu bukan Android dan karena itu jika iOS, saya mengatur ini untuk katakanlah putih. 31 00:02:20,130 --> 00:02:28,800 Sekarang jika kita melakukan itu dan kita simpan ini, kita melihat tajuk putih di sini di perangkat iOS dan tajuk 32 00:02:28,980 --> 00:02:31,090 berwarna di perangkat Android. 33 00:02:31,260 --> 00:02:36,960 Sekarang tentu saja Anda tidak perlu mengatur pendengar apa pun pada platform dan itu juga tidak menawarkan fungsi 34 00:02:37,140 --> 00:02:42,090 seperti itu karena platform tidak dapat berubah saat aplikasi sedang berjalan, itu adalah sistem operasi yang 35 00:02:42,090 --> 00:02:43,800 sama sepanjang waktu tentu saja. 36 00:02:43,830 --> 00:02:46,240 Sekarang mari kita selesaikan penataan untuk iOS. 37 00:02:46,650 --> 00:02:53,340 Saya katakan saya ingin memiliki batas tipis di bagian bawah, jadi kita bisa menambahkan 38 00:02:53,340 --> 00:03:01,410 warna batas bawah dan memeriksa platform dan jika sistem operasi ada yang sama dengan iOS, maka saya ingin 39 00:03:01,410 --> 00:03:07,950 mengatur warna batas bawah untuk mengatakan ini keabu-abuan warna, kalau tidak saya akan 40 00:03:07,980 --> 00:03:16,350 mengirimnya ke putih atau ke transparan sehingga kita tidak bisa melihatnya di Android dan menambahkan batas bawah dengan 41 00:03:16,770 --> 00:03:25,590 katakanlah dan di sana kami juga melakukan pengecekan untuk iOS katakanlah satu piksel pada iOS dan nol di Android. 42 00:03:25,590 --> 00:03:31,410 Jadi sekarang kita seharusnya tidak melihat apa pun di Android tetapi kita memiliki batasan tipis di sini di iOS. 43 00:03:31,530 --> 00:03:39,530 Last but not least, mari mewarnai teks dengan pergi ke teks judul di sini dan teks judul memang bergabung dalam gaya apa pun yang kita atur 44 00:03:39,590 --> 00:03:42,400 pada prop gaya, jadi di sini pada teks 45 00:03:42,770 --> 00:03:48,950 judul, kita dapat menambahkan prop gaya dan menunjuk pada gaya. beri judul di sini atau apa pun 46 00:03:48,960 --> 00:03:55,440 yang ingin Anda beri nama dan tambahkan objek gaya judul seperti itu di sini dalam stylesheet 47 00:03:55,860 --> 00:04:01,380 kami tempat kami mengatur warna yang merupakan warna teks juga berdasarkan pada platform. 48 00:04:01,770 --> 00:04:08,970 Jika itu iOS, katakanlah kita mengatur ini ke warna. primer dan sebaliknya, mari kita atur menjadi putih, sebelumnya 49 00:04:08,970 --> 00:04:09,830 hitam, 50 00:04:09,840 --> 00:04:11,700 mari kita atur menjadi putih. 51 00:04:11,700 --> 00:04:18,990 Sekarang kami memiliki judul putih di sini di Android tetapi judul berwarna di sini di iOS dan ini adalah betapa mudahnya Anda dapat 52 00:04:18,990 --> 00:04:22,600 mengatur gaya yang berbeda berdasarkan platform yang Anda jalankan seperti yang 53 00:04:22,620 --> 00:04:23,400 Anda lihat.