1 00:00:02,380 --> 00:00:08,210 Więc już przyjrzeliśmy się solidnemu zestawowi podstaw potrzebnych do budowania aplikacji React Native, do pracy z tymi podstawowymi 2 00:00:08,210 --> 00:00:10,050 elementami składowymi, chociaż oczywiście wiele 3 00:00:10,190 --> 00:00:13,460 rzeczy jest nadal niejasnych, tak naprawdę nie przyjrzeliśmy się bliżej 4 00:00:13,460 --> 00:00:17,660 stylizacja i układ itp., ale jedną rzeczą, którą zdecydowanie powinniśmy teraz zrobić, 5 00:00:17,780 --> 00:00:22,820 jest również zbadanie, w jaki sposób możesz budować własne komponenty, ponieważ do tej pory zawsze 6 00:00:23,030 --> 00:00:25,780 pracowaliśmy w aplikacji. plik js i na 7 00:00:26,000 --> 00:00:28,820 pewno nie zbudujesz większych aplikacji tylko w jednym 8 00:00:28,820 --> 00:00:31,360 pliku, plik ten w końcu stałby się 9 00:00:31,430 --> 00:00:37,190 super duży, a jeśli masz niestandardowy komponent, który planujesz powtórzyć, w tej chwili musielibyśmy skopiować i 10 00:00:37,190 --> 00:00:38,420 wkleić nasz kod. 11 00:00:38,660 --> 00:00:44,060 Stwórzmy więc nowe komponenty i dlatego tutaj w projekcie dodam nowy folder o nazwie komponenty, nazwa 12 00:00:44,060 --> 00:00:49,020 należy do ciebie, ale ponieważ planuję tam przechowywać niektóre komponenty, nazwa ma dla mnie 13 00:00:49,710 --> 00:00:55,250 sens, a tam, ja chcę utworzyć komponent dla elementu listy, a także jeden dla naszego obszaru wprowadzania. 14 00:00:55,340 --> 00:01:00,320 Stwórzmy więc dwa nowe pliki i będę miał konwencję nazewnictwa dla plików, w 15 00:01:00,320 --> 00:01:09,440 których zacznę od wielkich liter i będę miał mój GoalItem. js, jest to oczywiście plik JavaScript i 16 00:01:09,440 --> 00:01:16,100 mój GoalInput. plik js. Teraz oba będą zawierać normalny komponent React, 17 00:01:16,100 --> 00:01:21,830 więc zacznijmy od elementu celu, a zatem zaimportuj React z React, tak jak musisz to zrobić w React dla projektu internetowego. 18 00:01:21,830 --> 00:01:29,570 Następnie tutaj utworzę mój funkcjonalny komponent, element celu, który dostaje rekwizyty i który następnie musi 19 00:01:29,570 --> 00:01:36,000 zwrócić tutaj trochę jsx, i wyeksportuję to jako domyślne, tak jak to. 20 00:01:36,090 --> 00:01:42,030 Teraz jsx, który chcę tam wyrenderować, musi używać komponentów React Native lub innych niestandardowych składników, które następnie 21 00:01:42,060 --> 00:01:44,570 używają komponentów React Native i tutaj przejdę 22 00:01:44,730 --> 00:01:51,180 do treści, które tutaj miałem. Więc wytnę to z aplikacji. plik js i zwróć go 23 00:01:51,180 --> 00:01:51,790 tutaj. 24 00:01:52,450 --> 00:01:57,100 Teraz, aby użyć tego tutaj, musimy zaimportować widok i tekst, więc 25 00:01:57,100 --> 00:01:59,970 te dwa składniki, z React Native. 26 00:01:59,980 --> 00:02:05,760 Zaimportujmy tutaj widok i tekst z React-Native. 27 00:02:05,790 --> 00:02:10,410 Ponadto konfiguruję niektóre style i chcę użyć arkusza 28 00:02:10,410 --> 00:02:20,110 stylów, więc zaimportuję to tutaj, a następnie ustawię stałe style, które można inaczej nazwać przy tworzeniu arkusza 29 00:02:20,380 --> 00:02:26,990 stylów i wrócę do aplikacji. Plik js i pobierz mój styl elementu listy tutaj, wytnij go stamtąd i przejdź do elementu 30 00:02:26,990 --> 00:02:32,960 celu i dodaj go tutaj do tego obiektu, który przekazuję do arkusza stylów. Stwórz. 31 00:02:33,020 --> 00:02:39,140 Teraz to powinno działać, ale oczywiście to, co tu wypisuję, nie będzie już dotyczyć danych przedmiotów, zamiast tego 32 00:02:39,500 --> 00:02:46,550 spodziewajmy się, że po prostu otrzymamy to jako rekwizyty, więc albo oba rekwizyty potomne, aby można je było przekazać między otwierającym 33 00:02:46,550 --> 00:02:53,210 i zamykającym znacznikiem naszego niestandardowy komponent lub może rekwizyty. tytuł, cokolwiek zechcesz, a następnie 34 00:02:53,210 --> 00:02:59,770 wybraną nazwę rekwizytu. Teraz możemy użyć naszego 35 00:02:59,770 --> 00:03:06,580 niestandardowego komponentu, celu, wracając do aplikacji. plik js i tutaj dodam import do elementu celu z wielką 36 00:03:06,580 --> 00:03:15,370 literą G, aby React rozpoznał go jako komponent niestandardowy. / components / GoalItem, możesz pominąć. js, a teraz możemy 37 00:03:15,370 --> 00:03:24,550 użyć elementu celu na dole w renderowanym elemencie jako komponentu niestandardowego, w tym przypadku komponentu samozamykającego, ponieważ ponieważ 38 00:03:24,610 --> 00:03:30,220 używam tytułu rekwizytów, a nie rekwizytów potomnych, nie oczekuję niczego między 39 00:03:30,220 --> 00:03:37,660 otwarciem a zamknięciem tagi mojego niestandardowego komponentu. Oczekuję jednak prop tytułu, więc ustawmy to tutaj z tytułem, a 40 00:03:37,660 --> 00:03:43,360 następnie tutaj możemy wskazać dane przedmiotu, a następnie uzyskać dostęp do przedmiotu, który jest obiektem, w 41 00:03:44,480 --> 00:03:53,210 którym mamy klucz wartości, a przy tym powinniśmy nadal widzieć tak samo jak poprzednio, jeśli wprowadzimy tutaj jakieś cele, dowiedz się wszystkiego o rn, tak, 42 00:03:54,870 --> 00:04:01,230 to wygląda dobrze, teraz z naszym niestandardowym komponentem. Oto dobra praktyka, aby umieścić tekst i przycisk 43 00:04:01,260 --> 00:04:07,320 lub cały ten widok tutaj w naszym elemencie wprowadzania celu i oczywiście w tym celu konieczne 44 00:04:07,320 --> 00:04:12,810 będzie również usprawnienie komunikacji między aplikacją. Plik js i komponent wejściowy celu, aby 45 00:04:13,170 --> 00:04:18,930 być informowanym, gdy użytkownicy naciskają ten przycisk w komponencie wejściowym celu, a następnie dodają dane tutaj w 46 00:04:18,930 --> 00:04:19,730 aplikacji. plik js. 47 00:04:20,280 --> 00:04:25,260 Tak właśnie zrobiłbyś w projekcie React for web, więc jeśli masz z tym doświadczenie, nie 48 00:04:25,260 --> 00:04:30,860 powinno to stanowić problemu, inaczej zrobimy to razem w następnym wykładzie, ale jeśli wiesz, jak to zrobić, 49 00:04:30,860 --> 00:04:32,250 zdecydowanie spróbuj najpierw sam.