1
00:00:02,340 --> 00:00:08,370
Sekarang kita mendapatkan dasar-dasar ini dari jalan dan sebelum kita menyelam lebih dalam ke React Native dan juga

2
00:00:08,370 --> 00:00:13,920
bagaimana kita dapat mendesain aplikasi kita dalam sedikit cara yang lebih indah karena jelas gaya kita

3
00:00:13,950 --> 00:00:18,260
di sini pasti masih memiliki potensi sisi atas untuk meletakkannya seperti ini,

4
00:00:18,420 --> 00:00:23,790
sebelum kita menyelam semua itu, izinkan saya menunjukkan kepada Anda komponen menarik lain yang dibangun ke

5
00:00:23,790 --> 00:00:29,970
dalam React Native dan itu juga menunjukkan betapa mudahnya Anda dapat menambahkan fitur keren ke aplikasi React Native

6
00:00:30,150 --> 00:00:32,010
dan itu adalah komponen modal.

7
00:00:32,010 --> 00:00:38,310
Anda menemukannya tentu saja di dokumen resmi di komponen itu dan panduan API

8
00:00:38,310 --> 00:00:42,650
di sana-sini, Anda akan menemukan modal di sana.

9
00:00:43,420 --> 00:00:50,470
Sekarang di bawah yang lain dan di sini, modal ini adalah komponen yang bagus yang memungkinkan Anda

10
00:00:50,740 --> 00:00:55,780
untuk menambahkan overlay yang bagus, overlay layar penuh dengan sedikit usaha.

11
00:00:55,900 --> 00:01:00,490
Sekarang mari kita tambahkan modal untuk benar-benar meng-hosting input tujuan kita, saat ini input

12
00:01:00,490 --> 00:01:04,020
tujuan ada di sini di bagian atas dan itu tidak

13
00:01:04,540 --> 00:01:10,480
apa-apa tetapi saya benar-benar ingin memindahkannya ke dalam modal sehingga kita memilikinya pada overlay layar penuh pada akhirnya dan

14
00:01:10,660 --> 00:01:12,790
kami hanya memiliki tombol di sini

15
00:01:12,790 --> 00:01:16,480
di bagian atas, jadi sebagai pengganti input tujuan yang membuka modal itu.

16
00:01:16,630 --> 00:01:19,000
Jadi mari kita pergi ke input tujuan

17
00:01:19,000 --> 00:01:19,780
dan

18
00:01:19,810 --> 00:01:25,000
di sana, saya ingin membungkus ini menjadi modal. Jadi saya akan mengimpor modal dari

19
00:01:25,000 --> 00:01:27,600
React Native karena itu pengiriman komponen dengan

20
00:01:27,640 --> 00:01:34,020
React Native dan di sana, saya ingin menggunakan modal itu di sekitar pandangan saya di sini, jadi

21
00:01:34,040 --> 00:01:38,080
seperti ini untuk sekarang dan sekarang mari kita simpan itu dan

22
00:01:38,180 --> 00:01:41,150
mari kita lihat apakah itu sudah mengubah sesuatu

23
00:01:41,180 --> 00:01:42,740
sedikit ya, gaya

24
00:01:42,740 --> 00:01:46,700
kami padam, kami kehilangan lapisan yang kami setel awalnya, kan?

25
00:01:46,710 --> 00:01:52,370
Dalam aplikasi. js, kami memiliki bantalan umum pada tampilan layar

26
00:01:52,370 --> 00:01:58,430
kami yaitu tampilan luar itu, itu tentu tidak diterapkan pada dua platform lagi, pada dua perangkat karena

27
00:01:58,430 --> 00:02:03,800
konten kami jauh di luar layar ini, sehingga modal sudah melakukan sesuatu dan tentu saja

28
00:02:03,800 --> 00:02:08,480
kita tidak benar-benar melihat sebanyak itu. Sekarang untuk modal, jadi untuk komponen

29
00:02:09,020 --> 00:02:14,030
modal ini, Anda dapat mengatur kunci yang terlihat yang menentukan apakah ini saat ini terlihat

30
00:02:14,030 --> 00:02:19,730
atau tidak dan yang mengambil boolean jika kami menetapkan ini sebagai false misalnya dan setelah itu jika

31
00:02:19,730 --> 00:02:21,020
kami melihat aplikasi

32
00:02:21,080 --> 00:02:25,880
kami, kami tentu saja terlihat layar kosong. Ngomong-ngomong, kalau-kalau Android tidak boleh memperbarui untuk

33
00:02:25,900 --> 00:02:32,660
Anda setelah mengatur ini ke false, cukup tutup aplikasi di sini dengan bantuan laci aplikasi dan setelah itu dalam proses Anda

34
00:02:32,660 --> 00:02:37,080
di sana, proses mulai npm, tekan lagi untuk memulai kembali ini di Android.

35
00:02:37,100 --> 00:02:39,650
Jadi sekarang kita memiliki layar kosong ketika ini

36
00:02:39,650 --> 00:02:42,410
disetel ke false, sekarang kita jelas hardcoding ini bukan solusinya.

37
00:02:42,410 --> 00:02:47,990
Sebaliknya dalam aplikasi. js, saya sekarang ingin memiliki tombol yang memungkinkan kita untuk membuka modal itu

38
00:02:47,990 --> 00:02:49,340
dan kemudian kita akan menutup modal

39
00:02:49,350 --> 00:02:55,760
dari dalam modal ketika kita menekan tombol add di sana. Sekarang kita sudah mengimpor tombol di sini ke aplikasi. js dan sekarang saya melihat

40
00:02:55,760 --> 00:03:00,530
ini, tentu saja kita juga bisa menyingkirkan impor yang tidak kita gunakan di

41
00:03:00,560 --> 00:03:01,480
sini sekarang,

42
00:03:01,550 --> 00:03:06,400
jadi tinggalkan saja tombol impor di sini bersama dengan impor lain yang kita

43
00:03:06,490 --> 00:03:12,260
gunakan dan sekarang di sini di bagian paling atas , kita dapat menambahkan tombol, itu adalah

44
00:03:12,260 --> 00:03:22,160
tag penutup sendiri dan mengatur judul untuk menambahkan tujuan baru mungkin, sesuatu seperti itu. Jika kita melakukan itu, kita tentu harus melihat tombol itu di sini di atas dan

45
00:03:22,160 --> 00:03:22,750
di

46
00:03:22,750 --> 00:03:24,040
sini dan sekarang ketika

47
00:03:24,140 --> 00:03:31,000
kita menekan tombol itu, kita ingin menunjukkan modal itu, kan? Sekarang untuk itu, kita perlu mengelola lebih banyak

48
00:03:31,000 --> 00:03:31,920
negara.

49
00:03:31,990 --> 00:03:38,350
Jadi di sini selain mengelola tujuan kursus, saya sekarang juga akan mengelola apakah kita saat ini

50
00:03:38,410 --> 00:03:41,220
sedang dalam mode penambahan atau jika tidak.

51
00:03:41,260 --> 00:03:48,220
Jadi awalnya, kita tidak begitu keadaan awal yang saya tetapkan adalah salah dan saya akan memberi nama

52
00:03:48,220 --> 00:03:50,100
keadaan saya di sini

53
00:03:50,140 --> 00:03:55,460
dan tentu saja itu sepenuhnya terserah Anda, saya akan menamakannya AddMode dan setIsAddMode.

54
00:03:55,660 --> 00:03:56,860
Sekali lagi nama-nama

55
00:03:56,860 --> 00:04:03,220
ini terserah Anda, saya hanya memiliki konvensi di sini yang juga Anda temukan di dokumen Bereaksi resmi di mana di sini kami

56
00:04:03,220 --> 00:04:08,110
mencoba untuk memberikan keadaan kami mengendalikan nama yang pas dan kemudian kami pada dasarnya mengambil nama itu

57
00:04:08,110 --> 00:04:12,430
dan menambahkan set di depannya untuk memperjelas bahwa ini adalah fungsi untuk mengubah keadaan itu.

58
00:04:12,430 --> 00:04:17,230
Jadi setIsAddMode adalah apa yang pada akhirnya perlu kita panggil ketika tombol ini ditekan dan di

59
00:04:17,230 --> 00:04:22,750
sini kita dapat menggunakan fungsi inline atau menggunakan fungsi bernama dan hanya menambahkan handler di sini, apa pun yang

60
00:04:22,750 --> 00:04:23,700
Anda inginkan.

61
00:04:24,130 --> 00:04:28,450
Saya akan pergi dengan fungsi inline dan memanggil set isAddMode dan mengatur ini ke

62
00:04:28,480 --> 00:04:35,800
true di sini ketika tombol ini dipanggil sehingga kita membuka modal. Sekarang kita dapat mengambil status AddMode yang sedang kita ubah

63
00:04:35,800 --> 00:04:43,760
dan mengirimkannya ke input tujuan untuk kemudian mengubah visibilitas modal di sana. Jadi di sini, kita dapat menambahkan prop yang terlihat

64
00:04:43,760 --> 00:04:50,120
tetapi nama prop itu terserah Anda karena itu pada komponen kita sendiri dan saya meneruskan isAddMode,

65
00:04:50,120 --> 00:04:51,680
jadi itulah keadaan

66
00:04:51,680 --> 00:04:54,800
yang kita kendalikan, ke mode terlihat, sehingga

67
00:04:54,800 --> 00:04:59,660
nilai yang disimpan dalam isAdMMode dilewatkan sebagai nilai untuk prop yang terlihat.

68
00:04:59,660 --> 00:05:03,710
Sekarang dalam input tujuan, oleh karena itu kita sekarang dapat menggunakan prop

69
00:05:03,710 --> 00:05:06,670
yang terlihat, jadi di sini kita dapat menggunakan props

70
00:05:06,740 --> 00:05:12,080
yang terlihat, sekarang mengacu pada prop yang terlihat yang kita dapatkan pada input sasaran yang kemudian kita

71
00:05:12,230 --> 00:05:17,170
teruskan ke prop yang terlihat dari modal. Jika sekarang kita menyimpan itu dan kita melihat

72
00:05:17,310 --> 00:05:22,440
aplikasi kita, jika saya tekan tambahkan tujuan baru di sini, memang Anda melihat konten modal di sini lagi.

73
00:05:22,590 --> 00:05:25,020
Sekarang jelas, ini tidak terlihat cantik di

74
00:05:25,020 --> 00:05:26,590
sini, jadi kita

75
00:05:26,700 --> 00:05:33,450
harus mengubahnya dan satu hal lagi yang ingin saya ubah adalah animasi di sini bagus untuk membuka modalnya, kan?

76
00:05:33,450 --> 00:05:40,740
Jadi di sini mari kita tambahkan jenis animasi yang merupakan properti bagus yang dapat kita atur di sini dan Anda dapat mengatur ini ke string dan di

77
00:05:40,740 --> 00:05:45,210
sana Anda mendapat tiga opsi - tidak ada yang merupakan default tetapi Anda dapat mengatur ini untuk

78
00:05:45,420 --> 00:05:48,450
meluncur dan sekarang modal seharusnya benar-benar muncul dengan menggeser naik.

79
00:05:48,490 --> 00:05:51,760
Jadi jika Anda menekan add goal baru, sekarang slide

80
00:05:51,760 --> 00:05:53,430
ini, juga di Android.

81
00:05:53,430 --> 00:05:59,130
Jadi itulah pengalaman pengguna yang lebih baik, saya katakan, langkah berikutnya adalah kami memastikan bahwa konten kami

82
00:05:59,130 --> 00:06:04,410
di modal disajikan dengan cara yang lebih baik, mungkin dipusatkan di sini di tengah modal.