Czy ci się udało?
Zróbmy to razem.
Stwórzmy nowy komponent tutaj w danych wejściowych celu poprzez zaimportowanie React z React, a następnie
tutaj, nazwiemy to dane wejściowe
celu i po prostu podoba mi się ta stała składnia tutaj, możesz użyć wejściowego celu
funkcji do utworzenia komponentu funkcjonalnego, byłoby dobrze zbyt. Potem wyeksportuję domyślny cel wejściowy, a teraz tutaj musimy
coś zwrócić, a na końcu jest ten
widok z wprowadzaniem tekstu i przyciskiem.
Więc pozwól mi uchwycić cały widok, umieść go tutaj w nawiasach kwadratowych, aby był zapisany w wielu wierszach i
ładnie sformatowany, i oczywiście musimy teraz ponownie zaimportować rzeczy z React Native, ponieważ używamy kilku składników z
React Native , używamy komponentu widoku, używamy komponentu wprowadzania tekstu, używamy komponentu przycisku,
a także chcę użyć komponentu arkusza stylów do skonfigurowania mojego
obiektu arkusza stylów.
W tym celu dodajmy tutaj style za pomocą arkusza stylów. Utwórz, przekaż obiekt do tego arkusza stylów. utwórz metodę i
oczywiście pobierz style z aplikacji. Plik js, który byłby kontenerem wejściowym i danymi
wejściowymi, więc wytnij oba, aby tylko ekran pozostał tutaj i wrócił do danych wejściowych celu,
dodam oba tutaj do mojego arkusza stylów, aby to znowu działało. To, co nie zadziała teraz, to to,
że kiedy klikamy przycisk, dodajemy to, ponieważ tutaj nie mamy stanu w wprowadzaniu celu, a kiedy klikam przycisk, naprawdę chcę
coś zrobić w aplikacji. js.
Przede wszystkim musimy podzielić państwo. Wprowadzony cel nie powinien być zarządzany w aplikacji. js, ale powinno się
nim zarządzać przy wprowadzaniu celu, ponieważ tam na końcu
mamy tekst, w którym użytkownik wpisuje cel. Dodajmy więc import useState tutaj w danych wejściowych celu, a następnie
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
do danych wejściowych celu i z aplikacji. js, wezmę również moduł wprowadzania danych
celu, wycię go i dodam tutaj do danych wejściowych celu,
więc ta funkcja w funkcji, którą łączymy z onChangeText i teraz, pobieranie danych wejściowych użytkownika
powinno znów działać.
Teraz przycisk, kiedy go naciśniemy, chcę uruchomić funkcję w aplikacji. js, chcę uruchomić moduł obsługi celu dodawania i ta funkcja powinna
pozostać tutaj, ponieważ muszę tutaj zarządzać listą, ponieważ aplikacja. Plik js jest jedynym komponentem, który
będzie miał dostęp do danych wejściowych celu i FlatList, gdzie wypisujemy cele i mówiąc
o tym, możemy już zaimportować dane wejściowe tam w aplikacji. js z danych wejściowych celu komponentów i dodaj
dane wejściowe celu jako komponentu tutaj nad FlatList, ale znowu, teraz musimy być w stanie dowiedzieć się,
kiedy przycisk jest wciśnięty w tym komponencie i w
React, robisz to, przekazując funkcję, którą dziecko komponent powinien zostać ostatecznie wykonany jako rekwizyt dla
komponentu potomnego.
Więc tutaj moglibyśmy dodać onAddGoal, ta nazwa zależy wyłącznie od Ciebie, jest to
zdefiniowany przez ciebie
rekwizyt, który wskazuje na dodanie funkcji obsługi celu.
Samo to nic nie zrobi, ale onAddGoal będzie teraz odbierany jako rekwizyt wewnątrz wejściowego celu i będzie wskazywał
na funkcję, co oznacza, że możemy wykonać ją jako funkcję tam.
Więc przy wprowadzaniu celu, tam w prasie, mogę po
prostu wskazać na rekwizyt. onAddGoal, prawda?
Ponieważ onAddGoal to nazwa prop, którą konfiguruję tutaj w aplikacji. plik js, który jest odbierany w
danych wejściowych celu obiektu rekwizytów, który otrzymujemy w każdym komponencie funkcjonalnym i punktach onAddGoal w
funkcji, dzięki czemu możemy przekazać go do
onPress, aby onPress lub React Native wiedział, że powinien on wywołać tę funkcję
kiedy
naciskamy przycisk, robisz to w React Native.
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
wprowadzonym celem, którym jest wprowadzanie tekstu wprowadzone
przez użytkownika w celu wprowadź teraz, a nie w aplikacji.
js.
Więc dodaj moduł obsługi celu powinien teraz otrzymać argument, który jest tytułem celu lub jakkolwiek chcesz go
nazwać,
ta nazwa należy do Ciebie i to właśnie przechowujemy tutaj jako wartość.
Teraz musimy upewnić się, że przekazujemy ten argument, gdy cel dodawania zostanie wykonany w danych wejściowych celu.
Tak dzieje się tutaj w prasie i tutaj wskazujemy na to, aby również ustawić
argument, który ostatecznie powinien zostać przekazany,
otrzymujemy dwie opcje, pierwsza to ustawienie anonimowej funkcji strzałki.
Teraz ta funkcja strzałki zostanie w końcu wykonana i dlatego możemy teraz dodać
nawiasy tutaj, ponieważ nie
będzie ona teraz wykonywana, gdy zostanie ona najpierw renderowana, zamiast tego ta funkcja strzałki zostanie
zarejestrowana jako funkcja
do wykonania dla onPress, a teraz tutaj w onAddGoal, możemy przekazać wprowadzony cel, na przykład, który zadziałałby lub
alternatywnie, nie używamy tego anonimowego podejścia do funkcji strzałek, a zatem nie możemy
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
argumenty, które powinny zostać ostatecznie przekazane, gdy funkcja zostanie wykonana.
Pierwszy argument dotyczy zawsze tego, do czego powinno odnosić się to słowo kluczowe.
Nie ma to dla nas znaczenia, więc możemy to po prostu napisać, ale drugi argument
tutaj lub wszystkie pozostałe argumenty w rzeczywistości będą argumentami otrzymanymi przez tę funkcję, gdy zostanie wywołana i
zostanie wywołana po naciśnięciu przycisku.
To są teraz argumenty, które są przekazywane do funkcji onAddGoal, która w końcu jest tylko
naszą funkcją dodawania modułu obsługi celu i tam potrzebujemy tytułu celu,
więc musimy go
przekazać, więc tutaj mogę teraz skonfigurować cel jako argument, który ma zostać przekazany, i
to jest normalna waniliowa składnia JavaScript tutaj.
A teraz jest renderowany, to wygląda dobrze i
jeśli wejdę, naucz
się React Native, nadal otrzymuję wyniki tutaj. Tak, aby wszystko działało, ale teraz
podzieliliśmy tę aplikację na wiele składników, co zwykle wykonuje się w aplikacjach React i
React Native, podobnie jak w React dla aplikacji internetowych, ponieważ utrzymuje komponenty węższe, bardziej skoncentrowane
i kod jest lepiej zorganizowany i łatwiejsze do zrozumienia.