1 00:00:02,250 --> 00:00:03,310 Czy ci się udało? 2 00:00:03,350 --> 00:00:04,710 Zróbmy to razem. 3 00:00:04,710 --> 00:00:11,390 Stwórzmy nowy komponent tutaj w danych wejściowych celu poprzez zaimportowanie React z React, a następnie 4 00:00:11,500 --> 00:00:14,040 tutaj, nazwiemy to dane wejściowe 5 00:00:14,040 --> 00:00:20,610 celu i po prostu podoba mi się ta stała składnia tutaj, możesz użyć wejściowego celu 6 00:00:20,610 --> 00:00:28,120 funkcji do utworzenia komponentu funkcjonalnego, byłoby dobrze zbyt. Potem wyeksportuję domyślny cel wejściowy, a teraz tutaj musimy 7 00:00:28,120 --> 00:00:31,030 coś zwrócić, a na końcu jest ten 8 00:00:31,030 --> 00:00:33,700 widok z wprowadzaniem tekstu i przyciskiem. 9 00:00:34,090 --> 00:00:42,650 Więc pozwól mi uchwycić cały widok, umieść go tutaj w nawiasach kwadratowych, aby był zapisany w wielu wierszach i 10 00:00:42,650 --> 00:00:50,110 ładnie sformatowany, i oczywiście musimy teraz ponownie zaimportować rzeczy z React Native, ponieważ używamy kilku składników z 11 00:00:50,110 --> 00:00:55,840 React Native , używamy komponentu widoku, używamy komponentu wprowadzania tekstu, używamy komponentu przycisku, 12 00:00:55,840 --> 00:01:00,460 a także chcę użyć komponentu arkusza stylów do skonfigurowania mojego 13 00:01:00,460 --> 00:01:02,270 obiektu arkusza stylów. 14 00:01:02,470 --> 00:01:10,510 W tym celu dodajmy tutaj style za pomocą arkusza stylów. Utwórz, przekaż obiekt do tego arkusza stylów. utwórz metodę i 15 00:01:11,140 --> 00:01:16,840 oczywiście pobierz style z aplikacji. Plik js, który byłby kontenerem wejściowym i danymi 16 00:01:16,840 --> 00:01:21,540 wejściowymi, więc wytnij oba, aby tylko ekran pozostał tutaj i wrócił do danych wejściowych celu, 17 00:01:21,730 --> 00:01:28,510 dodam oba tutaj do mojego arkusza stylów, aby to znowu działało. To, co nie zadziała teraz, to to, 18 00:01:28,510 --> 00:01:37,840 że kiedy klikamy przycisk, dodajemy to, ponieważ tutaj nie mamy stanu w wprowadzaniu celu, a kiedy klikam przycisk, naprawdę chcę 19 00:01:37,870 --> 00:01:42,790 coś zrobić w aplikacji. js. 20 00:01:42,910 --> 00:01:49,480 Przede wszystkim musimy podzielić państwo. Wprowadzony cel nie powinien być zarządzany w aplikacji. js, ale powinno się 21 00:01:49,480 --> 00:01:54,040 nim zarządzać przy wprowadzaniu celu, ponieważ tam na końcu 22 00:01:54,040 --> 00:02:01,360 mamy tekst, w którym użytkownik wpisuje cel. Dodajmy więc import useState tutaj w danych wejściowych celu, a następnie 23 00:02:01,360 --> 00:02:08,950 dodajmy naszą logikę zarządzania stanem z wprowadzonym celem i ustawmy wprowadzony cel, który otrzymujemy z useState, który zainicjowaliśmy pustym łańcuchem, dodajmy go tutaj 24 00:02:08,950 --> 00:02:14,650 do danych wejściowych celu i z aplikacji. js, wezmę również moduł wprowadzania danych 25 00:02:14,650 --> 00:02:18,780 celu, wycię go i dodam tutaj do danych wejściowych celu, 26 00:02:18,820 --> 00:02:24,910 więc ta funkcja w funkcji, którą łączymy z onChangeText i teraz, pobieranie danych wejściowych użytkownika 27 00:02:24,910 --> 00:02:26,490 powinno znów działać. 28 00:02:26,740 --> 00:02:32,660 Teraz przycisk, kiedy go naciśniemy, chcę uruchomić funkcję w aplikacji. js, chcę uruchomić moduł obsługi celu dodawania i ta funkcja powinna 29 00:02:32,680 --> 00:02:38,360 pozostać tutaj, ponieważ muszę tutaj zarządzać listą, ponieważ aplikacja. Plik js jest jedynym komponentem, który 30 00:02:38,560 --> 00:02:44,350 będzie miał dostęp do danych wejściowych celu i FlatList, gdzie wypisujemy cele i mówiąc 31 00:02:44,350 --> 00:02:52,950 o tym, możemy już zaimportować dane wejściowe tam w aplikacji. js z danych wejściowych celu komponentów i dodaj 32 00:02:52,950 --> 00:03:02,010 dane wejściowe celu jako komponentu tutaj nad FlatList, ale znowu, teraz musimy być w stanie dowiedzieć się, 33 00:03:02,010 --> 00:03:06,790 kiedy przycisk jest wciśnięty w tym komponencie i w 34 00:03:06,790 --> 00:03:14,740 React, robisz to, przekazując funkcję, którą dziecko komponent powinien zostać ostatecznie wykonany jako rekwizyt dla 35 00:03:14,740 --> 00:03:16,150 komponentu potomnego. 36 00:03:16,150 --> 00:03:20,850 Więc tutaj moglibyśmy dodać onAddGoal, ta nazwa zależy wyłącznie od Ciebie, jest to 37 00:03:20,860 --> 00:03:22,230 zdefiniowany przez ciebie 38 00:03:22,840 --> 00:03:25,990 rekwizyt, który wskazuje na dodanie funkcji obsługi celu. 39 00:03:26,030 --> 00:03:32,980 Samo to nic nie zrobi, ale onAddGoal będzie teraz odbierany jako rekwizyt wewnątrz wejściowego celu i będzie wskazywał 40 00:03:32,980 --> 00:03:37,520 na funkcję, co oznacza, że możemy wykonać ją jako funkcję tam. 41 00:03:37,540 --> 00:03:41,550 Więc przy wprowadzaniu celu, tam w prasie, mogę po 42 00:03:41,950 --> 00:03:45,990 prostu wskazać na rekwizyt. onAddGoal, prawda? 43 00:03:46,000 --> 00:03:51,370 Ponieważ onAddGoal to nazwa prop, którą konfiguruję tutaj w aplikacji. plik js, który jest odbierany w 44 00:03:51,370 --> 00:03:57,430 danych wejściowych celu obiektu rekwizytów, który otrzymujemy w każdym komponencie funkcjonalnym i punktach onAddGoal w 45 00:03:57,430 --> 00:04:00,200 funkcji, dzięki czemu możemy przekazać go do 46 00:04:00,330 --> 00:04:05,630 onPress, aby onPress lub React Native wiedział, że powinien on wywołać tę funkcję 47 00:04:05,630 --> 00:04:06,470 kiedy 48 00:04:06,550 --> 00:04:09,430 naciskamy przycisk, robisz to w React Native. 49 00:04:09,430 --> 00:04:17,150 Nadal mielibyśmy problem, ponieważ dodając moduł obsługi celu, mam na myśli wprowadzony cel, który wcześniej był tutaj zarządzany, ale już go nie ma, zarządziliśmy 50 00:04:17,170 --> 00:04:19,670 wprowadzonym celem, którym jest wprowadzanie tekstu wprowadzone 51 00:04:19,750 --> 00:04:26,340 przez użytkownika w celu wprowadź teraz, a nie w aplikacji. 52 00:04:26,340 --> 00:04:26,340 js. 53 00:04:26,950 --> 00:04:32,620 Więc dodaj moduł obsługi celu powinien teraz otrzymać argument, który jest tytułem celu lub jakkolwiek chcesz go 54 00:04:32,620 --> 00:04:33,160 nazwać, 55 00:04:33,190 --> 00:04:37,530 ta nazwa należy do Ciebie i to właśnie przechowujemy tutaj jako wartość. 56 00:04:37,540 --> 00:04:47,700 Teraz musimy upewnić się, że przekazujemy ten argument, gdy cel dodawania zostanie wykonany w danych wejściowych celu. 57 00:04:48,870 --> 00:04:55,350 Tak dzieje się tutaj w prasie i tutaj wskazujemy na to, aby również ustawić 58 00:04:55,350 --> 00:04:58,410 argument, który ostatecznie powinien zostać przekazany, 59 00:04:58,410 --> 00:05:02,620 otrzymujemy dwie opcje, pierwsza to ustawienie anonimowej funkcji strzałki. 60 00:05:02,640 --> 00:05:08,250 Teraz ta funkcja strzałki zostanie w końcu wykonana i dlatego możemy teraz dodać 61 00:05:08,250 --> 00:05:09,930 nawiasy tutaj, ponieważ nie 62 00:05:09,960 --> 00:05:16,050 będzie ona teraz wykonywana, gdy zostanie ona najpierw renderowana, zamiast tego ta funkcja strzałki zostanie 63 00:05:16,050 --> 00:05:17,730 zarejestrowana jako funkcja 64 00:05:17,730 --> 00:05:25,230 do wykonania dla onPress, a teraz tutaj w onAddGoal, możemy przekazać wprowadzony cel, na przykład, który zadziałałby lub 65 00:05:25,290 --> 00:05:30,690 alternatywnie, nie używamy tego anonimowego podejścia do funkcji strzałek, a zatem nie możemy 66 00:05:30,690 --> 00:05:38,790 tutaj dodawać nawiasów, ale możemy użyć innej funkcji Javascript, w przypadku funkcji, które możemy wywołać bind do wstępnie skonfiguruj niektóre 67 00:05:39,120 --> 00:05:43,560 argumenty, które powinny zostać ostatecznie przekazane, gdy funkcja zostanie wykonana. 68 00:05:43,560 --> 00:05:47,190 Pierwszy argument dotyczy zawsze tego, do czego powinno odnosić się to słowo kluczowe. 69 00:05:47,190 --> 00:05:52,680 Nie ma to dla nas znaczenia, więc możemy to po prostu napisać, ale drugi argument 70 00:05:52,680 --> 00:05:58,440 tutaj lub wszystkie pozostałe argumenty w rzeczywistości będą argumentami otrzymanymi przez tę funkcję, gdy zostanie wywołana i 71 00:05:58,440 --> 00:06:00,270 zostanie wywołana po naciśnięciu przycisku. 72 00:06:00,270 --> 00:06:06,210 To są teraz argumenty, które są przekazywane do funkcji onAddGoal, która w końcu jest tylko 73 00:06:06,210 --> 00:06:10,600 naszą funkcją dodawania modułu obsługi celu i tam potrzebujemy tytułu celu, 74 00:06:10,620 --> 00:06:12,080 więc musimy go 75 00:06:12,120 --> 00:06:17,740 przekazać, więc tutaj mogę teraz skonfigurować cel jako argument, który ma zostać przekazany, i 76 00:06:17,940 --> 00:06:20,760 to jest normalna waniliowa składnia JavaScript tutaj. 77 00:06:21,850 --> 00:06:24,740 A teraz jest renderowany, to wygląda dobrze i 78 00:06:24,740 --> 00:06:25,920 jeśli wejdę, naucz 79 00:06:26,090 --> 00:06:31,340 się React Native, nadal otrzymuję wyniki tutaj. Tak, aby wszystko działało, ale teraz 80 00:06:31,340 --> 00:06:36,770 podzieliliśmy tę aplikację na wiele składników, co zwykle wykonuje się w aplikacjach React i 81 00:06:36,770 --> 00:06:42,740 React Native, podobnie jak w React dla aplikacji internetowych, ponieważ utrzymuje komponenty węższe, bardziej skoncentrowane 82 00:06:42,800 --> 00:06:46,550 i kod jest lepiej zorganizowany i łatwiejsze do zrozumienia.