Teraz, aby wyświetlić naszą listę celów, tutaj, w widoku, chcę po prostu wypisać kilka składników tekstowych, na razie po
prostu drukuję mój cel i aby to zrobić, możemy wprowadzić dynamiczne wyrażenie tutaj z pojedynczymi otwierającymi i zamykającymi nawiasami klamrowymi a teraz
odwołujemy się do celów
kursu, czyli tej zmiennej, którą tu dostaliśmy z rozkładem tablic. Cele kursu to nasza gama celów i teraz,
podobnie jak w normalnym
React, który tak naprawdę nie lubię, ponieważ w końcu używamy normalnego React, tak jak
znasz go z
React dla projektów internetowych, możesz teraz zamapuj tę tablicę danych na tablicę komponentów za pomocą
metody map, która jest normalną metodą Javascript. Metoda map przyjmuje funkcję, która wykonuje się na
każdym elemencie w tablicy, więc
tutaj
otrzymujemy nasz cel, a następnie musi zwrócić tutaj nowy komponent. Znowu użyję tej wbudowanej funkcji strzałki, gdzie zamiast
mieć nawiasy klamrowe, a następnie coś zwracać, pomijam nawiasy klamrowe i pomijam instrukcję
return, jest to poprawna składnia JavaScript, to również zwróci
to, co tu wprowadzę.
To, co chcę zwrócić, to komponent tekstowy, więc
ten komponent tekstowy zaimportowaliśmy z React Native i dzięki temu możemy teraz wyświetlić nasz cel tutaj, ponieważ cel w celach kursu będzie
po prostu tekstem, ponieważ to, co dodajemy do celów kursu, to wprowadzony cel i wpisany
cel otrzymujemy z wprowadzania tekstu, a to tylko tekst.
Więc teraz, właśnie wyprowadzamy trochę tekstu i mapuję wszystkie moje cele kursu na komponenty
tekstowe, które zostaną wyświetlone w tym widoku tutaj. I dzięki temu, jeśli to uratujemy, powinniśmy już
być w
stanie zacząć dodawać pewne cele, więc naucz się React Native to jedna z rzeczy, które mogę tu wpisać,
kliknij dodaj i oto
jest, naucz się tego na poważnie, a my też to otrzymamy,
a jeśli chcesz też zrobić naleśniki, możesz to zrobić i oczywiście działa
to również na iOS, naprawdę poznaj React Native i oczywiście nadal chcę zrobić naleśniki.
Więc to działa i w ten sposób możemy wygenerować prostą, bardzo trywialną listę przedmiotów tutaj.
Teraz oczywiście te przedmioty wyglądają raczej nudno, więc może możemy zastosować tam stylizację,
aby wyglądały lepiej. Zanim to zrobimy,
pamiętaj, że mamy błąd w naszym terminalu.
Teraz nasza aplikacja wyraźnie działa, ale błąd, który tu otrzymujemy, polega na tym, że każde dziecko
na liście powinno mieć unikalny kluczowy rekwizyt i jest to normalna reguła React, nic React Native specyficzne.
Rzeczywiście, zawsze należy przypisywać klucz do listy widżetów tutaj, aby React mógł skutecznie aktualizować tę listę
za kulisami, jeśli zajdzie taka potrzeba. Robisz to, dodając tutaj kluczową prop, a następnie
klucz powinien być unikalnym identyfikatorem, na razie
przejdźmy do samego celu, który nie jest ściśle unikalny, możesz dwukrotnie wprowadzić
ten sam cel z tym samym tekstem, co dałoby ci błąd, ale
na razie załóżmy, że tego nie
robisz, dlatego możemy użyć celu jako klucza, a jeśli to zrobimy, pozbywamy się tego ostrzeżenia.
Jeśli teraz nauczyłem się React Native, mogę to dodać bez błędu.
Znowu, jeśli dodam ten sam tekst dwa razy, to technicznie nawet nie dostaję tutaj błędu, ale byłoby to
błędne,
oto jest, oto błąd, ponieważ mam dwoje dzieci z tym samym kluczem.
Więc na razie założymy, że tego nie
robisz, to jest normalna kluczowa zasada, którą masz w normalnym React.
Załóżmy więc, że nie osiągniesz dwukrotnie tego samego celu i kontynuuj stylizację tych przedmiotów, ponieważ
w tej chwili nie wyglądają zbyt ekscytująco.