1
00:00:02,500 --> 00:00:07,190
Teraz wyłączyłem linkowanie tutaj, aby nie mieć wszystkich ostrzeżeń i błędów dotyczących stylu kodu.

2
00:00:07,190 --> 00:00:10,550
Oczywiście możesz dostosować swój kod do tego stylu,

3
00:00:10,640 --> 00:00:12,820
co ostatecznie jest osobistą preferencją.

4
00:00:12,830 --> 00:00:19,070
Teraz chcę pokazać, jak możesz oczywiście zmienić kod, ale także jak możemy

5
00:00:19,130 --> 00:00:24,390
dodać natywną funkcjonalność w takiej waniliowej aplikacji React Native.

6
00:00:24,610 --> 00:00:28,780
Dlatego przede wszystkim znacznie uproszczę tę aplikację startową,

7
00:00:28,850 --> 00:00:37,250
po prostu pozbędę się tej zawartości tutaj i po prostu dodam podstawowy styl ustawiony tutaj za pomocą Flex

8
00:00:37,400 --> 00:00:44,090
One, uzasadnię centrum treści i wyrównam centrum przedmiotów, aby wyśrodkować moją zawartość ekran.

9
00:00:44,090 --> 00:00:46,550
Pozbądź się tego tutaj

10
00:00:46,760 --> 00:00:54,150
i z wszystkich tych importów tutaj, chcę użyć arkusza stylów, chcę użyć widoku i

11
00:00:54,290 --> 00:00:59,720
chcę użyć przycisku, ponieważ chcę dodać funkcję wyboru obrazu.

12
00:00:59,750 --> 00:01:01,660
Więc tutaj zwracam mój

13
00:01:02,750 --> 00:01:08,100
widok i przycisk, a na przycisku mówię zrób zdjęcie, a następnie w

14
00:01:08,240 --> 00:01:10,460
onPress chcę otworzyć selektor zdjęć.

15
00:01:10,460 --> 00:01:11,990
Jak możemy to dodać?

16
00:01:12,230 --> 00:01:20,030
Ponieważ jest to projekt React Native bez expo w jakikolwiek sposób, nie możemy łatwo użyć tutaj interfejsów API expo.

17
00:01:20,040 --> 00:01:25,530
Istnieje sposób na ich użycie i powrócę do tego w dalszej części tego modułu,

18
00:01:25,530 --> 00:01:30,690
ale trzeba będzie skonfigurować kilka rzeczy. Dlatego możemy zamiast tego zrobić coś,

19
00:01:30,690 --> 00:01:34,660
co dużo zrobisz, jeśli pracujesz z waniliową aplikacją React Native, szukamy

20
00:01:34,730 --> 00:01:39,810
na przykład narzędzia wyboru obrazu React Native, aby znaleźć pakiet, który nam w tym

21
00:01:39,810 --> 00:01:43,060
pomoże, na przykład ten, pakiet wyboru obrazu React Native,

22
00:01:43,320 --> 00:01:49,140
a teraz możemy go zainstalować, ponieważ teraz możemy przynieść dowolny pakiet innej firmy, bez względu na to,

23
00:01:49,320 --> 00:01:55,080
czy dodaje on natywne funkcje do Twojej aplikacji. Wcześniej z expo nie było to tak naprawdę możliwe,

24
00:01:55,080 --> 00:01:59,520
można było przynieść tylko pakiety innych firm, które nie korzystały z natywnych funkcji urządzenia,

25
00:01:59,520 --> 00:02:01,380
teraz nie ma żadnych ograniczeń.

26
00:02:01,470 --> 00:02:03,060
Teraz możemy

27
00:02:03,360 --> 00:02:09,810
to dodać i tutaj możemy to zainstalować, postępując zgodnie z instrukcjami instalacji tutaj,

28
00:02:09,810 --> 00:02:18,690
więc wracając do naszego projektu i tam, uruchamiając npm install --save, a następnie tutaj jest React Native selektor

29
00:02:21,970 --> 00:02:25,430
obrazów, taki jak ten. Nawiasem mówiąc, możesz utrzymać ten

30
00:02:25,450 --> 00:02:30,730
proces tutaj i powinieneś, aby zmiany kodu po zapisaniu plików były pobierane i przesyłane na twoje urządzenia.

31
00:02:30,970 --> 00:02:34,310
Poczekajmy więc na zakończenie tej instalacji.

32
00:02:34,330 --> 00:02:35,090
Teraz to się

33
00:02:35,110 --> 00:02:35,860
skończyło,

34
00:02:36,800 --> 00:02:39,240
zajęło to sporo czasu i teraz musimy to

35
00:02:39,240 --> 00:02:41,900
zainstalować, a dobrą rzeczą jest to, że ten pakiet

36
00:02:41,910 --> 00:02:44,770
jest bardzo łatwy do zainstalowania, wystarczy uruchomić to polecenie tutaj

37
00:02:44,790 --> 00:02:47,250
- React Native link, React Native selektor obrazów.

38
00:02:47,340 --> 00:02:49,270
Więc uruchom to w

39
00:02:50,400 --> 00:02:53,550
swoim projekcie, tak jak to i powinieneś być dobry.

40
00:02:53,730 --> 00:02:57,870
Teraz powiem, że istnieją pakiety innych firm, które wymagają więcej wysiłku, tak naprawdę

41
00:02:57,870 --> 00:03:00,960
to zależy od pakietu. Jeśli chodzi o expo,

42
00:03:00,960 --> 00:03:05,540
to oczywiście było bardzo łatwe, właśnie uruchomiłeś instalację expo, to było bardzo szybkie, nie

43
00:03:05,550 --> 00:03:08,720
trwało to długo i nie musiałeś robić nic więcej.

44
00:03:08,880 --> 00:03:11,140
Tutaj musisz uruchomić jedną dodatkową komendę,

45
00:03:11,270 --> 00:03:12,870
ale to oczywiście

46
00:03:12,870 --> 00:03:16,890
nie jest tak źle, ale powiem jeszcze, że nie wszystkie pakiety

47
00:03:16,920 --> 00:03:22,950
obsługują tę komendę, niektóre pakiety wymagają znacznie więcej ręcznej pracy z okablowaniem, pracy ręcznej, w której musisz

48
00:03:22,950 --> 00:03:28,250
zanurzyć się w Foldery z Androidem i iOS, aby rozpocząć pracę z niektórymi plikami konfiguracyjnymi.

49
00:03:28,290 --> 00:03:33,600
To właśnie zrobiło dla ciebie polecenie React Native link, na przykład na Androidzie, jeśli zanurzysz się

50
00:03:33,600 --> 00:03:39,540
w folderze aplikacji i tam, źródle, a następnie w folderze źródłowym do stopnia kompilacji, zobaczysz, że tam,

51
00:03:42,290 --> 00:03:43,970
ta linia została dodana.

52
00:03:44,000 --> 00:03:45,710
Nie było tego od

53
00:03:45,710 --> 00:03:48,610
samego początku, zostało to dodane przez polecenie React

54
00:03:48,830 --> 00:03:52,250
Native link, a dla niektórych pakietów musisz dodać te

55
00:03:52,250 --> 00:03:57,080
wpisy ręcznie, wiele pakietów obsługuje polecenie link, aw nowszych wersjach React Native, niektóre

56
00:03:57,080 --> 00:04:02,480
nawet pakiety obsługują automatyczne łączenie, gdzie to połączenie zostanie wykonane automatycznie po zakończeniu instalacji, ale

57
00:04:02,480 --> 00:04:06,550
nie wszystkie pakiety mają taką obsługę, więc należy o tym pamiętać.

58
00:04:06,550 --> 00:04:12,680
Za kulisami zmieniono wiele konfiguracji. Dzięki temu możemy teraz użyć

59
00:04:13,100 --> 00:04:19,680
tego pakietu, ponownie zgodnie z instrukcjami w ich dokumentach, abyśmy mogli dodać ten

60
00:04:20,000 --> 00:04:31,050
import tutaj, tutaj, a następnie także dodać funkcję wyboru obrazu tutaj i połączyć to z naszym przyciskiem, a teraz tutaj selektor obrazów

61
00:04:34,100 --> 00:04:37,360
działa nieco inaczej niż na expo.

62
00:04:37,370 --> 00:04:42,400
Tutaj nazywamy próbnik obrazu pokazuj próbnik obrazu z opcjami, które możemy skonfigurować, opcje

63
00:04:42,410 --> 00:04:49,550
są skonfigurowane zgodnie z opisem tutaj lub ogólnie w dokumentacji, a tutaj po prostu wezmę cały kod tutaj,

64
00:04:49,640 --> 00:04:56,120
tak jak ten, skopiuj go do obrazu wyboru pozbyć się tego wywołania stanu ustawionego, nie jesteśmy

65
00:04:56,140 --> 00:04:58,510
w komponencie klasowym, więc nie jest

66
00:04:58,510 --> 00:05:00,450
to coś, co możemy

67
00:05:00,460 --> 00:05:03,820
zrobić, zamiast tego w bloku else po prostu

68
00:05:04,000 --> 00:05:06,560
konsolę zarejestruję identyfikator URI odpowiedzi, który

69
00:05:06,590 --> 00:05:09,960
powinien być ścieżką obrazu które zostało zrobione, a następnie

70
00:05:10,150 --> 00:05:11,160
mamy tutaj

71
00:05:11,340 --> 00:05:16,330
kilka procedur obsługi różnych scenariuszy i dzięki temu zobaczmy, czy to działa.

72
00:05:16,330 --> 00:05:17,440
Jeśli to

73
00:05:20,110 --> 00:05:21,550
zapiszemy, normalnie powinno

74
00:05:21,550 --> 00:05:28,470
się tutaj odbudować, ale z powodu zainstalowanego naszego nowego pakietu, zakończę ten proces i ponownie uruchomię teraz

75
00:05:28,490 --> 00:05:33,680
natywny run-android tutaj w moim terminalu zintegrowanym z Visual Studio Code, a

76
00:05:33,680 --> 00:05:42,270
zatem w tym folderze projektu i teraz spowoduje to ponowne uruchomienie tego serwera programistycznego i, co ważniejsze, uruchomi także aplikację na

77
00:05:42,270 --> 00:05:47,750
emulatorze, aby, jak mam nadzieję, go tam zobaczyć i przetestować próbnik obrazów tutaj.

78
00:05:47,820 --> 00:05:51,060
Poczekajmy więc na zakończenie, na zakończenie procesu budowania.

79
00:05:51,060 --> 00:05:58,260
Teraz nadchodzi aplikacja i jeśli ją wcisnę, dostanę tę nakładkę, mogę kliknąć zdjęcie i nic

80
00:05:58,260 --> 00:05:59,700
się nie dzieje.

81
00:05:59,700 --> 00:06:04,290
Powodem tego jest brak uprawnień i to była praca ręczna, o której mówiłem. Musimy przejść do

82
00:06:04,290 --> 00:06:11,610
folderu Androida, tam do źródła, głównego, AndroidManifest, który konfiguruje aplikację na Androida i

83
00:06:11,610 --> 00:06:16,770
tam musisz dodać nowe pozwolenie. Możesz skopiować to uprawnienie internetowe, którego zawsze

84
00:06:16,770 --> 00:06:22,530
będziesz potrzebować, aby aplikacja na Androida komunikowała się z serwerem programistycznym i tam możesz teraz dodać uprawnienie

85
00:06:22,530 --> 00:06:29,360
do kamery, które musisz dodać, aby ta aplikacja mogła uzyskać dostęp do kamery urządzenia, w przeciwnym razie to nie jest wspierany.

86
00:06:29,370 --> 00:06:35,820
Teraz możemy ponownie uruchomić ten proces, odbudować aplikację i upewnić się, że weźmiemy pod uwagę to nowe ustawienie

87
00:06:35,820 --> 00:06:39,090
i dzięki temu powinniśmy być w stanie to otworzyć.

88
00:06:39,120 --> 00:06:43,070
To znowu dodatkowa konfiguracja, której oczywiście nie musieliśmy robić w świecie expo.

89
00:06:44,400 --> 00:06:49,180
Nawiasem mówiąc, na iOS musisz również zrobić coś podobnego podczas odbudowy. Tam, jeśli przejdziesz

90
00:06:49,200 --> 00:06:57,100
do pliku RNWithoutExpo, znajdziesz informacje. plik plist, aw tym pliku musisz

91
00:06:57,490 --> 00:07:02,630
również dodać wpis, aby poprosić o to uprawnienie.

92
00:07:07,760 --> 00:07:14,660
Musisz dodać nowy klucz tutaj po istniejącej parze klucz-wartość, dokładna pozycja nie ma znaczenia, a znajdziesz

93
00:07:14,670 --> 00:07:19,920
szczegółowe instrukcje na oficjalnych dokumentach tego pakietu, tam pod zainstalowanym dokumentem, jeśli

94
00:07:19,920 --> 00:07:25,710
tam klikniesz, możesz znajdę instrukcje dotyczące tego, które uprawnienia należy ustawić dla Androida,

95
00:07:25,710 --> 00:07:27,100
ja też

96
00:07:27,150 --> 00:07:32,240
zapomniałem, musimy również ustawić to zezwolenie na pamięć zewnętrzną, więc wrócę

97
00:07:32,250 --> 00:07:38,380
do AndroidManifest, dodaj to tutaj i teraz uruchom ponownie to na Androida i iOS

98
00:07:38,410 --> 00:07:43,970
, tutaj musisz ustawić te klucze. Więc skopiujesz to wszystko,

99
00:07:47,020 --> 00:07:53,410
a następnie wrócisz do informacji. plik listy pokazałem ci tutaj i teraz możesz dodać te pary klucz-wartość tutaj.

100
00:07:57,460 --> 00:07:58,210
Dzięki

101
00:07:58,750 --> 00:08:01,750
temu sprawdźmy aplikację na Androida i jeśli teraz kliknę

102
00:08:01,930 --> 00:08:05,860
na zrób zdjęcie, teraz jestem proszony o pozwolenie tutaj, dzieje się

103
00:08:05,860 --> 00:08:08,730
to automatycznie, pakiet robi to za nas, a

104
00:08:08,920 --> 00:08:12,120
teraz kamera się otwiera. Więc to działa teraz,

105
00:08:12,130 --> 00:08:17,350
ale jak zauważyłeś z odrobiną dodatkowej konfiguracji i postępując zgodnie z instrukcjami na oficjalnych dokumentach,

106
00:08:17,350 --> 00:08:23,260
a każda paczka będzie miała swoje własne instrukcje. Niektóre pakiety nawet nie obsługują polecenia link,

107
00:08:23,260 --> 00:08:23,830
tam

108
00:08:23,860 --> 00:08:25,530
musisz zrobić jeszcze

109
00:08:25,560 --> 00:08:31,380
więcej, inne pakiety wymagają mniej pracy. Masz większą elastyczność, ale także więcej obowiązków.

110
00:08:31,390 --> 00:08:37,240
Jednak w ten sposób możesz przenieść pakiety innych firm, które korzystają z funkcji natywnych urządzeń do aplikacji React Native tylko

111
00:08:37,240 --> 00:08:40,970
dla kodu komponentu, który piszesz, to jest ten sam kod, który napisaliśmy

112
00:08:41,020 --> 00:08:43,630
przez cały kurs - te same komponenty, ta

113
00:08:43,630 --> 00:08:49,660
sama logika, w ten sam sposób jak tworzysz swoją aplikację. Możesz utworzyć te same foldery, dodać nawigację

114
00:08:49,660 --> 00:08:52,540
React, która nie zmienia się.