Więc już przyjrzeliśmy się solidnemu zestawowi podstaw potrzebnych do budowania aplikacji React Native, do pracy z tymi podstawowymi
elementami składowymi, chociaż oczywiście wiele
rzeczy jest nadal niejasnych, tak naprawdę nie przyjrzeliśmy się bliżej
stylizacja i układ itp., ale jedną rzeczą, którą zdecydowanie powinniśmy teraz zrobić,
jest również zbadanie, w jaki sposób możesz budować własne komponenty, ponieważ do tej pory zawsze
pracowaliśmy w aplikacji. plik js i na
pewno nie zbudujesz większych aplikacji tylko w jednym
pliku, plik ten w końcu stałby się
super duży, a jeśli masz niestandardowy komponent, który planujesz powtórzyć, w tej chwili musielibyśmy skopiować i
wkleić nasz kod.
Stwórzmy więc nowe komponenty i dlatego tutaj w projekcie dodam nowy folder o nazwie komponenty, nazwa
należy do ciebie, ale ponieważ planuję tam przechowywać niektóre komponenty, nazwa ma dla mnie
sens, a tam, ja chcę utworzyć komponent dla elementu listy, a także jeden dla naszego obszaru wprowadzania.
Stwórzmy więc dwa nowe pliki i będę miał konwencję nazewnictwa dla plików, w
których zacznę od wielkich liter i będę miał mój GoalItem. js, jest to oczywiście plik JavaScript i
mój GoalInput. plik js. Teraz oba będą zawierać normalny komponent React,
więc zacznijmy od elementu celu, a zatem zaimportuj React z React, tak jak musisz to zrobić w React dla projektu internetowego.
Następnie tutaj utworzę mój funkcjonalny komponent, element celu, który dostaje rekwizyty i który następnie musi
zwrócić tutaj trochę jsx, i wyeksportuję to jako domyślne, tak jak to.
Teraz jsx, który chcę tam wyrenderować, musi używać komponentów React Native lub innych niestandardowych składników, które następnie
używają komponentów React Native i tutaj przejdę
do treści, które tutaj miałem. Więc wytnę to z aplikacji. plik js i zwróć go
tutaj.
Teraz, aby użyć tego tutaj, musimy zaimportować widok i tekst, więc
te dwa składniki, z React Native.
Zaimportujmy tutaj widok i tekst z React-Native.
Ponadto konfiguruję niektóre style i chcę użyć arkusza
stylów, więc zaimportuję to tutaj, a następnie ustawię stałe style, które można inaczej nazwać przy tworzeniu arkusza
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
celu i dodaj go tutaj do tego obiektu, który przekazuję do arkusza stylów. Stwórz.
Teraz to powinno działać, ale oczywiście to, co tu wypisuję, nie będzie już dotyczyć danych przedmiotów, zamiast tego
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
i zamykającym znacznikiem naszego niestandardowy komponent lub może rekwizyty. tytuł, cokolwiek zechcesz, a następnie
wybraną nazwę rekwizytu. Teraz możemy użyć naszego
niestandardowego komponentu, celu, wracając do aplikacji. plik js i tutaj dodam import do elementu celu z wielką
literą G, aby React rozpoznał go jako komponent niestandardowy. / components / GoalItem, możesz pominąć. js, a teraz możemy
użyć elementu celu na dole w renderowanym elemencie jako komponentu niestandardowego, w tym przypadku komponentu samozamykającego, ponieważ ponieważ
używam tytułu rekwizytów, a nie rekwizytów potomnych, nie oczekuję niczego między
otwarciem a zamknięciem tagi mojego niestandardowego komponentu. Oczekuję jednak prop tytułu, więc ustawmy to tutaj z tytułem, a
następnie tutaj możemy wskazać dane przedmiotu, a następnie uzyskać dostęp do przedmiotu, który jest obiektem, w
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,
to wygląda dobrze, teraz z naszym niestandardowym komponentem. Oto dobra praktyka, aby umieścić tekst i przycisk
lub cały ten widok tutaj w naszym elemencie wprowadzania celu i oczywiście w tym celu konieczne
będzie również usprawnienie komunikacji między aplikacją. Plik js i komponent wejściowy celu, aby
być informowanym, gdy użytkownicy naciskają ten przycisk w komponencie wejściowym celu, a następnie dodają dane tutaj w
aplikacji. plik js.
Tak właśnie zrobiłbyś w projekcie React for web, więc jeśli masz z tym doświadczenie, nie
powinno to stanowić problemu, inaczej zrobimy to razem w następnym wykładzie, ale jeśli wiesz, jak to zrobić,
zdecydowanie spróbuj najpierw sam.