Zawiń React Native Components

Uwaga: ten post jest stary. Nie sądzę, że nadal powiedziałbym, że „zawijanie” komponentów tekstowych to najlepsza praktyka. Zamiast tego zdefiniowałem pół tuzina stylów czcionek, których użyłem w osobnym pliku, które można zaimportować i w razie potrzeby rozszerzyć na definicje stylów (lub emocji).

Można by pomyśleć, że skoro podstawowe komponenty React Native są klasami, należy je rozszerzyć. Ale jak stwierdził Dan Abramov, nie jest to świetny pomysł. Możesz zaimplementować komponenty wyższego rzędu, ale tak naprawdę to, czego prawdopodobnie potrzebujesz, to po prostu zastąpienie użycia niektórych podstawowych komponentów reagujących na coś nieco mocniejszym. Tam właśnie zaczyna się owijanie.

Po prostu owijając główny komponent RN w odrobinę funkcji interfejsu użytkownika, utrzymujesz swój kod w czystości, a także ustawiasz właściwości globalne. Doświadczeni programiści RN przejrzyj swoje arkusze stylów i dowiedz się, ile razy używasz arkusza stylów do rozwiązywania problemów związanych z układem. Chcesz się tego pozbyć? Zrobiłem. Mam nadzieję, że dla początkujących ten post pomoże Ci nauczyć się Flexboksa, udostępniając narzędzie, które znacznie go upraszcza.

Ta grafika pokazuje, jak to działa w pigułce. Omówię to później. Chciałbym jednak najpierw wspomnieć, dlaczego tak ważne jest, aby zawrzeć niektóre kluczowe komponenty RN we własnym kodzie niestandardowym.

To tylko przykład jednego zapakowanego komponentu, który uwielbiam używać i który ma otwarte źródła. Ale częściej będziesz musiał owinąć swój własny. Wytłumaczę.

Stworzyłem dwie opublikowane aplikacje działające w trybie rodzimym, a po refaktoryzacji ostatniego projektu zdecydowałem, że są trzy trzy rzeczy, które zdecydowanie powinieneś zawsze zawinąć.

  1. Tekst
  2. Dotykalny
  3. Widok

Żeby było jasne, zawijanie oznacza, że ​​będziesz importować i używać własnego komponentu Text z src zamiast tego z RN. Pozdrawiam to.

Tekst

Prawie musisz zawinąć tekst z dwóch powodów. Jednym z powodów jest to, że nie chcesz importować i deklarować tej samej rodziny fontFamily w każdym elemencie aplikacji. Chcesz ustawić czcionkę jako domyślną dla wszystkich składników Text lub mieć możliwość łatwego przełączania czcionek.

Kolejny powód mówi o większym problemie, który musisz zrozumieć o React Native UI. FontSize to wielkość w pikselach, która będzie wyglądać inaczej na różnych urządzeniach o różnych rozdzielczościach. Dotyczy to również wysokości, szerokości, marginesu, wypełnienia i pozycjonowania bezwzględnego. Dlatego zawsze należy próbować używać flex dla układów, jeśli to możliwe, a jeśli nie, rozważ użycie getPixelSizeForLayoutSize przy każdym ustawianiu tych właściwości. To jest ból, ale zastanów się, dlaczego naprawdę warto spróbować wszystkiego za pomocą Flexboksa.

W przypadku tekstu należy jednak unikać ustawienia fontSize jako piksela. Pokażę ci tylko, czego używam, zapożyczając z tego wpisu SO.

Zasadniczo takie zawijanie jest w rzeczywistości odwzorowaniem rekwizytów na style. Niektórzy mogą uznać to za anty-wzór, ale wynik jest wspaniałym narzędziem dla programisty, który ma minimalny umysł. Zamiast importować tekst z „reagującego rodzimego”, zamiast tego importuj go z „/components/Text.js” lub gdziekolwiek zdecydujesz się go umieścić.

Odsłonięte rekwizyty powinny obejmować większość twoich stylów, więc może nie być konieczne tworzenie skrzynki z arkuszami stylów.

Tak to wykorzystuję. Jest całkiem czysty i wiem, jak będzie wyglądał ten tekst bez konieczności odwoływania się do arkusza stylów.

Dotykalny

Istnieje wiele modułów do obejścia tego, choć żadne z nich nie są zbyt popularne, ale najważniejsze jest to, że Touchable (NativeFeedback itp.) Jest obsługiwany inaczej na iOS i Androidzie, więc nie powinieneś importować tego z React Ojczysty. Można również znaleźć wiele implementacji przycisków, ale zazwyczaj mają wbudowane style

Widok

W przypadku widoku sugeruję sprawdzenie mojego komponentu-wiersz-reakcyjny-macierzysty.

Zdecydowałem się na coś po przejściu do refaktoryzacji interfejsu mojej ostatniej aplikacji. Uświadomiłem sobie, że zamiast znajdować elementy, które były wielokrotnego użytku i zasługiwały na własną deklarację, zamiast tego znajdowałem sceny, których elementów nie używano w innych scenach.

Myślałem o innych sposobach zmniejszenia bałaganu. Pamiętałem, że musiałem ustawić flexDirection: row, gdy często była to jedyna właściwość do ustawienia. Zacząłem od utworzenia opakowania wokół widoku, aby to zrobić. Ale potem zauważyłem tyle razy, że użyłem tylko alignItems i justifyContents.

Wystarczy powiedzieć, że ostatecznie stworzyłem opakowanie, które zrobiło coś, co w połowie miałem nadzieję, że to zrobi. Sprawiło to, że moje deklaracje arkusza stylów stały się niepotrzebne.

Zacznijmy od tej sceny. To ekran zarządzania profilami. Nie ma tu żadnych elementów wielokrotnego użytku oprócz przycisków i być może logo. Istnieje element ScrollView, którego tak naprawdę nie planuję używać nigdzie indziej w aplikacji.

Zasadniczo głównym celem tej strony jest układanie elementów, z których wiele to Tekst.

Patrząc na kod górnej części strony, możesz zobaczyć mieszankę stylów wbudowanych i użycia arkusza stylów. Nie jest to idealne, ale przewaga jednej z nich nigdy nie przekonała mnie do wykluczenia jednego lub drugiego w drodze konwencji.

Trochę to zmieniłem, uznając niechlujność i nieprawidłowe użycie stylu, ale takie rzeczy się zdarzyły, ponieważ nigdy nie znalazłem „lepszego” sposobu radzenia sobie ze stylami. Ale czy tak naprawdę deklarujemy tutaj „style”? Wszystko poza stylami tekstu naprawdę dotyczy układu.

Postanowiłem usunąć potrzebę zadawania sobie pytania, gdzie radzić sobie ze stylami układu, ponieważ w Flexboksie tak naprawdę nie są to style. Flexbox zasługuje na swoje miejsce poza stylami, ponieważ jest tak potężny, ale często źle rozumiany.

Zobacz, co się stanie, gdy zastąpimy przypisanie układu Flexboksa czymś bardziej intuicyjnym i zwięzłym.

Wystarczająco proste?

Uwaga dotycząca wiersza-reakcyjnego-rodzimego: wiersz jest widokiem z FlexDirection: „wiersz” i tarcza ustawia pozycję wszystkich komponentów potomnych na pozycję cyfry 5 na tarczy telefonicznej - i flex, użyte tutaj jako wartość logiczna, ustawia wygiąć właściwość do 1.

Korzystając z React-Native-Row i komponentu Text powyżej, całkowicie usunąłem wszystkie właściwości Flexbox ze stylu i sprawiłem, że moja scena była bardziej responsywna.

Myśli?

Nie jestem ekspertem od React, ale spędziłem rok z React Native i to ma dla mnie sens. Czy istnieje lepszy sposób na wdrożenie tego? Prawdopodobnie. Czy to jest anty-wzór? Może. Bardzo chciałbym usłyszeć, co myślą ludzie.