1
00:00:02,340 --> 00:00:08,370
Teraz, gdy pozbywamy się tych podstaw i zanim zanurzymy się głębiej w React Native, a także

2
00:00:08,370 --> 00:00:13,920
w jaki sposób możemy stylizować nasze aplikacje w nieco piękniejszy sposób, ponieważ oczywiście nasza stylizacja

3
00:00:13,950 --> 00:00:18,260
zdecydowanie ma pewien potencjał, aby to ująć w ten sposób, zanim przejdziemy

4
00:00:18,420 --> 00:00:23,790
do tego wszystkiego, pozwól, że pokażę ci inny ekscytujący komponent, który jest wbudowany w

5
00:00:23,790 --> 00:00:29,970
React Native i który pokazuje również, jak łatwo możesz dodawać fajne funkcje do aplikacji React Native i

6
00:00:30,150 --> 00:00:32,010
to jest modalny komponent.

7
00:00:32,010 --> 00:00:38,310
Znajdziesz go oczywiście w oficjalnych dokumentach w tym przewodniku po komponentach

8
00:00:38,310 --> 00:00:42,650
i interfejsach API, gdzieś tam znajdziesz modal.

9
00:00:43,420 --> 00:00:50,470
Teraz jest pod innymi i tutaj ten modal jest ładnym komponentem, który pozwala

10
00:00:50,740 --> 00:00:55,780
dodać tak ładną nakładkę, pełnoekranową nakładkę przy niewielkim wysiłku.

11
00:00:55,900 --> 00:01:00,490
Dodajmy teraz modal do faktycznego hostowania naszego celu, teraz cel jest

12
00:01:00,490 --> 00:01:04,020
tutaj na górze i to jest w porządku,

13
00:01:04,540 --> 00:01:10,480
ale tak naprawdę chcę go przenieść do modalu, aby na końcu mieć nakładkę pełnoekranową i

14
00:01:10,660 --> 00:01:12,790
mamy tylko przycisk u

15
00:01:12,790 --> 00:01:16,480
góry, więc zamiast wprowadzania celu, który otwiera ten modal.

16
00:01:16,630 --> 00:01:19,000
Przejdźmy więc do wprowadzania celu

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

18
00:01:19,810 --> 00:01:25,000
tam chcę zawinąć to w modal. Więc zaimportuję modal z React

19
00:01:25,000 --> 00:01:27,600
Native, ponieważ jest to komponent dostarczany

20
00:01:27,640 --> 00:01:34,020
z React Native i tam, chcę użyć tego modalu wokół mojego widoku tutaj, więc

21
00:01:34,040 --> 00:01:38,080
teraz tak teraz i teraz zapiszmy to i zobaczmy,

22
00:01:38,180 --> 00:01:41,150
czy to już coś zmienia trochę

23
00:01:41,180 --> 00:01:42,740
tak, nasza

24
00:01:42,740 --> 00:01:46,700
stylizacja jest wyłączona, tracimy wyściółkę, którą pierwotnie ustawiliśmy, prawda?

25
00:01:46,710 --> 00:01:52,370
W aplikacji js, mamy ogólne wypełnienie naszego widoku ekranu,

26
00:01:52,370 --> 00:01:58,430
które jest widokiem zewnętrznym, z pewnością nie jest już stosowane na dwóch platformach, na dwóch urządzeniach,

27
00:01:58,430 --> 00:02:03,800
ponieważ nasza zawartość jest daleko poza tym ekranem, więc modal już coś robi i

28
00:02:03,800 --> 00:02:08,480
oczywiście tak bardzo nie widzimy. Teraz dla modalu, więc dla tego

29
00:02:09,020 --> 00:02:14,030
komponentu modalnego możesz ustawić widoczny klucz, który określa, czy jest on obecnie widoczny,

30
00:02:14,030 --> 00:02:19,730
czy nie, i który przyjmuje wartość logiczną, jeśli ustawimy na wartość false, a następnie, jeśli

31
00:02:19,730 --> 00:02:21,020
spojrzymy na

32
00:02:21,080 --> 00:02:25,880
nasze aplikacje, oczywiście widać pusty ekran. Nawiasem mówiąc, w przypadku, gdy Android nie

33
00:02:25,900 --> 00:02:32,660
powinien aktualizować się po ustawieniu tego na false, po prostu zamknij aplikację tutaj za pomocą szuflady aplikacji, a następnie w

34
00:02:32,660 --> 00:02:37,080
procesie na dole procesu uruchamiania npm, naciśnij ponownie, aby ponownie uruchomić na Androida.

35
00:02:37,100 --> 00:02:39,650
Więc teraz mamy pusty ekran, gdy jest ustawiony na

36
00:02:39,650 --> 00:02:42,410
false, teraz oczywiście na stałe kodujemy, to nie jest rozwiązanie.

37
00:02:42,410 --> 00:02:47,990
Zamiast tego w aplikacji. js, chcę teraz mieć przycisk, który pozwoli nam otworzyć ten modal,

38
00:02:47,990 --> 00:02:49,340
a następnie zamkniemy modal

39
00:02:49,350 --> 00:02:55,760
z wnętrza modalu, kiedy tam klikniemy przycisk dodawania. Teraz już importujemy tutaj przycisk do aplikacji. js i teraz, gdy to

40
00:02:55,760 --> 00:03:00,530
widzę, możemy oczywiście pozbyć się również tych importów, których obecnie nie

41
00:03:00,560 --> 00:03:01,480
używamy, więc

42
00:03:01,550 --> 00:03:06,400
po prostu zostaw tutaj przycisk importu wraz z innymi importami, których używamy,

43
00:03:06,490 --> 00:03:12,260
a teraz tutaj na samej górze , możemy dodać przycisk, ale jest to samozamykający

44
00:03:12,260 --> 00:03:22,160
się tag i ustawić tytuł, aby dodać nowy cel, może coś takiego. Jeśli to zrobimy, oczywiście powinniśmy zobaczyć ten przycisk tutaj u góry, a oto

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

46
00:03:22,750 --> 00:03:24,040
i teraz, kiedy

47
00:03:24,140 --> 00:03:31,000
naciskamy ten przycisk, chcemy pokazać ten modal, prawda? Teraz musimy zarządzać większą liczbą

48
00:03:31,000 --> 00:03:31,920
stanów.

49
00:03:31,990 --> 00:03:38,350
Więc oprócz zarządzania celami kursu, teraz będę również zarządzał, czy obecnie jesteśmy w

50
00:03:38,410 --> 00:03:41,220
trybie dodawania kursu, czy nie.

51
00:03:41,260 --> 00:03:48,220
Tak więc początkowo nie jesteśmy tak, że stan początkowy, który ustawiam, jest fałszywy i nadam

52
00:03:48,220 --> 00:03:50,100
nazwę mojemu stanowi

53
00:03:50,140 --> 00:03:55,460
i oczywiście to zależy od ciebie, nadam mu nazwę toAddMode i setIsAddMode.

54
00:03:55,660 --> 00:03:56,860
Znowu te nazwy

55
00:03:56,860 --> 00:04:03,220
zależą od ciebie, po prostu mam tutaj konwencję, którą znajdziesz również w oficjalnych dokumentach React, w której tutaj staramy się

56
00:04:03,220 --> 00:04:08,110
nadać stan, w którym kontrolujemy odpowiednią nazwę, a następnie w zasadzie bierzemy tę nazwę i

57
00:04:08,110 --> 00:04:12,430
dodajemy zestaw przed nim, aby wyjaśnić, że jest to funkcja zmiany tego stanu.

58
00:04:12,430 --> 00:04:17,230
Więc setIsAddMode jest tym, co musimy w końcu wywołać po naciśnięciu tego przycisku,

59
00:04:17,230 --> 00:04:22,750
a tutaj możemy użyć funkcji wbudowanej lub funkcji nazwanej i po prostu dodać tutaj funkcję obsługi,

60
00:04:22,750 --> 00:04:23,700
cokolwiek chcesz.

61
00:04:24,130 --> 00:04:28,450
Pójdę z funkcją inline i zestawem wywołań jestAddMode i ustawię tutaj wartość

62
00:04:28,480 --> 00:04:35,800
true, gdy ten przycisk zostanie wywołany, abyśmy otworzyli modal. Teraz możemy przyjąć, że zmieniamy stan AddMode i przekazać

63
00:04:35,800 --> 00:04:43,760
go do danych wejściowych celu, aby następnie zmienić widoczność modalu. Więc tutaj możemy dodać widoczną rekwizyt, ale ta

64
00:04:43,760 --> 00:04:50,120
nazwa rekwizytu zależy od ciebie, ponieważ jest na naszym własnym komponencie i przekazuję isAddMode,

65
00:04:50,120 --> 00:04:51,680
więc to jest

66
00:04:51,680 --> 00:04:54,800
stan, który kontrolujemy, do trybu widocznego,

67
00:04:54,800 --> 00:04:59,660
więc wartość przechowywana w isAddMode jest przekazywana jako wartość widocznego rekwizytu.

68
00:04:59,660 --> 00:05:03,710
Teraz przy wprowadzaniu celu możemy więc teraz użyć tej

69
00:05:03,710 --> 00:05:06,670
widocznej rekwizytu, więc tutaj możemy użyć rekwizytów

70
00:05:06,740 --> 00:05:12,080
widocznych, teraz odnosząc się do widocznej rekwizyty, którą dostaliśmy na celu, którą następnie

71
00:05:12,230 --> 00:05:17,170
przekazujemy do widocznej rekwizyty modalu. Jeśli teraz to zapiszemy i spojrzymy na

72
00:05:17,310 --> 00:05:22,440
naszą aplikację, jeśli kliknę tutaj dodaj nowy cel, rzeczywiście zobaczysz tutaj ponownie tę modalną treść.

73
00:05:22,590 --> 00:05:25,020
Oczywiście nie wygląda to tutaj tak pięknie,

74
00:05:25,020 --> 00:05:26,590
więc powinniśmy to

75
00:05:26,700 --> 00:05:33,450
zmienić, a jeszcze jedną rzeczą, którą chcę zmienić, jest to, że animacja byłaby ładna do otwarcia modalu, prawda?

76
00:05:33,450 --> 00:05:40,740
Więc dodajmy typ animacji, który jest przyjemną właściwością, którą możemy ustawić tutaj i możesz ustawić to na ciąg znaków i masz trzy

77
00:05:40,740 --> 00:05:45,210
opcje - żadna nie jest domyślna, ale możesz ustawić to na przesuwanie, a teraz

78
00:05:45,420 --> 00:05:48,450
modal powinien się pojawić poprzez przesuwanie w górę.

79
00:05:48,490 --> 00:05:51,760
Więc jeśli naciśniesz Dodaj nowy cel, teraz przesuwa się w

80
00:05:51,760 --> 00:05:53,430
górę, również na Androidzie.

81
00:05:53,430 --> 00:05:59,130
Powiedziałbym, że jest to sposób na lepsze wrażenia użytkownika. Kolejnym krokiem jest zapewnienie, że nasza

82
00:05:59,130 --> 00:06:04,410
zawartość w tym module będzie ładniejsza, być może skoncentrowana tutaj w środku modułu.