Przejdź do treści głównej

React Native 0.71: TypeScript domyślnie, Flexbox Gap i więcej...

· 12 minut czytania
Matt Carroll
Matt Carroll
Developer Advocate @ Meta
Nick Gerleman
Nick Gerleman
Software Engineer @ Meta
Nicola Corti
Nicola Corti
Software Engineer @ Meta
Lorenzo Sciandra
Lorenzo Sciandra
Senior Software Engineer @ Microsoft
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Dziś wydajemy wersję 0.71 React Native! To wydanie zawiera wiele nowych funkcji, w tym:

W tym poście omówimy najważniejsze nowości w wersji 0.71.

informacja

Pełną listę zmian znajdziesz w CHANGELOG.md.

TypeScript domyślnie​

W tym wydaniu skupiamy się na ulepszeniu doświadczeń z TypeScript w React Native.

Od wersji 0.71, gdy tworzysz nową aplikację React Native za pomocą CLI, domyślnie otrzymasz aplikację w TypeScript. Nowy projekt zawiera już tsconfig.json, więc twoje IDE od razu pomoże ci pisać kod z typami.

Dodaliśmy też wbudowane, dokładniejsze deklaracje TypeScript bezpośrednio w pakiecie react-native. Oznacza to, że nie będziesz już potrzebować @types/react-native, a typy będą aktualizowane równolegle z wydaniami React Native.

Ostatecznie zaktualizowaliśmy dokumentację, aby wszystkie przykłady wykorzystywały TypeScript.

uwaga

Po aktualizacji do React Native 0.71 zalecamy usunięcie @types/react-native z devDependencies w pliku package.json.

Więcej szczegółów o tej zmianie, w tym kroki migracji i wpływ na użytkowników Flow, znajdziesz w naszym poprzednim poście First-class Support for TypeScript.

Uproszczenie układów z Flexbox Gap​

W React Native możesz elastycznie układać komponenty na różnych rozmiarach ekranów za pomocą Flexbox. Przeglądarki od dawna obsługują właściwości Flexbox gap, rowGap i columnGap, które pozwalają określić odstępy między elementami.

Te właściwości były długo oczekiwane w React Native, a wersja 0.71 dodaje wstępną obsługę odstępów w pikselach. W przyszłych wersjach dodamy obsługę innych wartości, np. procentów.

Aby zrozumieć przydatność tej funkcji, wyobraź sobie budowanie responsywnego układu z kartami o zmiennych rozmiarach, oddalonymi o 10px i przylegającymi do krawędzi kontenera. Osiągnięcie tego za pomocą marginesów elementów potomnych byłoby trudne.

Poniższy przykład pokazuje układ, w którym każdy element potomny ma styl margin: 10:

Dwa diagramy. Po lewej widzimy szkielet aplikacji z trzema prostokątami mającymi marginesy wokół, co powoduje odstępy ze wszystkich stron. Po prawej ten sam diagram podświetlony, by zobrazować marginesy ze wszystkich stron.

Marginesy są stosowane równomiernie na krawędziach wszystkich elementów potomnych i nie zapadają się w kontekście Flexboxa. Powoduje to odstępy na zewnątrz kart oraz podwójną przestrzeń między nimi w porównaniu z oczekiwaniami. Można temu zaradzić stosując nieregularne marginesy, ujemne marginesy na elemencie nadrzędnym lub dzieląc planowane odstępy, ale istnieje prostsze rozwiązanie.

Dzięki właściwości flex gap ten układ można osiągnąć, ustawiając gap: 10 na kontenerze, co da 10-pikselowy odstęp między kartami:

Dwa diagramy. Po lewej widzimy szkielet aplikacji z trzema prostokątami mającymi marginesy tylko po wewnętrznych stronach dzięki właściwości Flexbox gap. Po prawej ten sam diagram podświetlony, by zobrazować marginesy wyłącznie po wewnętrznych stronach.

Więcej informacji o odstępach w Flexboxu znajdziesz w tym artykule na CSS Tricks.

Inspirowane webem właściwości dla dostępności, stylów i zdarzeń​

Ta wersja wprowadza wiele nowych właściwości inspirowanych standardami webowymi, aby ujednolicić API React Native na różnych platformach. Nowe właściwości są czysto dodatkowe, więc nie wymagają migracji ani nie zmieniają zachowania istniejących odpowiedników dotyczących dostępności, zachowań lub stylów.

Dla każdego nowego aliasa właściwości: jeśli istnieje już właściwość o innej nazwie i podane są obie, pierwszeństwo ma wartość nowego aliasa. Na przykład ta wersja dodaje alias src dla właściwości source w komponencie Image, aby dostosować się do właściwości src w środowisku webowym. Jeśli podano zarówno src, jak i source, użyta zostanie nowa właściwość src.

uwaga

Więcej o dostosowywaniu React Native do standardów webowych znajdziesz w tej propozycji i powiązanej dyskusji.

Dostępność​

Wprowadziliśmy właściwości ARIA jako aliasy istniejących właściwości dostępności w React Native.

Te właściwości istnieją teraz we wszystkich podstawowych komponentach React Native: aria-label, aria-labelledby, aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow i aria-valuetext.

Wprowadziliśmy także równoważne zachowania webowe dla: aria-hidden, aria-live, role i tabIndex.

Więcej szczegółów znajdziesz w tym zgłoszeniu.

Zachowanie specyficzne dla komponentów​

Wprowadzono także właściwości dostosowujące nazwy do odpowiedników DOM dla podstawowych komponentów.

  • Image: alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet i width.

  • TextInput: autoComplete, enterKeyHint, inputMode, readOnly i rows.

Więcej szczegółów znajdziesz w tym zgłoszeniu.

Style​

Aby dostosować się do niektórych stylów CSS, rozszerzono funkcjonalność następujących właściwości:

  • aspectRatio obsługuje teraz wartości tekstowe

  • fontVariant obsługuje teraz wartości tekstowe rozdzielane spacjami

  • Właściwość fontWeight obsługuje teraz wartości numeryczne

  • Właściwość transform obsługuje teraz wartości tekstowe

Dodano następujące aliasy odpowiadające istniejącym stylom React Native:

Więcej szczegółów znajdziesz w tym zgłoszeniu.

Zdarzenia​

Dodaliśmy również opcjonalną implementację PointerEvents

Po włączeniu następujące procedury obsługi w komponencie View będą wspierać efekt najechania:

  • onPointerOver, onPointerOut

  • onPointerEnter, onPointerLeave

Te zdarzenia zaimplementowano także w Pressability dla nowej opcjonalnej obsługi najechania.

Aby włączyć te funkcje, ustaw następujące flagi na true:

import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';

// enable the JS-side of the w3c PointerEvent implementation
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;

// enable hover events in Pressibility to be backed by the PointerEvent implementation.
// shouldEmitW3CPointerEvents should also be true
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
  () => true;
uwaga

Będziesz też musiał włączyć flagi funkcji Reacta w natywnej konfiguracji dla Androida i iOS.

Więcej informacji znajdziesz w naszym dedykowanym wpisie o PointerEvents.

Przywracanie PropTypes​

Typy właściwości React Native, takie jak ViewPropTypes i Text.propTypes, zostały oznaczone jako przestarzałe w wersji 0.66, a dostęp do nich generował ostrzeżenia. Po ich usunięciu w wersji 0.68 wielu deweloperów napotkało błędy podczas aktualizacji do najnowszej wersji React Native.

Po analizie zrozumieliśmy, że kilka problemów uniemożliwiało społeczności reakcję na ostrzeżenia o przestarzałych funkcjach. Po pierwsze, ostrzeżenia nie zawsze wskazywały konkretne działania (problem 1, problem 2). Po drugie, ostrzeżenia były błędnie filtrowane przez LogBox.ignoreLogs. Oba problemy zostały naprawione, ale chcemy dać użytkownikom więcej czasu na aktualizację przestarzałych elementów.

Dlatego w tej wersji przywracamy PropTypes React Native, aby ułatwić aktualizację i migrację kodu. Pakiet deprecated-react-native-prop-types został również zaktualizowany pod kątem wszystkich właściwości w wersji 0.71. W przyszłości planujemy kontynuować wycofywanie i ponownie usunąć typy właściwości. Oczekujemy, że przy ponownym usuwaniu społeczność napotka znacznie mniej problemów.

ostrzeżenie

W ramach tej zmiany usuwamy również filtrowanie konsoli z LogBox.ignoreLog. Oznacza to, że logi wcześniej filtrowane przez Logbox.ignoreLog ponownie pojawią się w konsoli po aktualizacji.

To oczekiwane zachowanie, ponieważ umożliwia znalezienie i naprawienie logów takich jak ostrzeżenia o przestarzałych funkcjach.

Ulepszenia dla deweloperów​

React DevTools​

W tej wersji przenieśliśmy dwie popularne funkcje React DevTools z środowiska webowego do React Native.

Opcja "Click to inspect" w lewym górnym rogu narzędzi React Dev Tools pozwala kliknąć element w aplikacji, aby zbadać go w Dev Tools, podobnie jak w inspektorze elementów Chrome.

Podświetlanie komponentów wyróżnia w aplikacji element wybrany w DevTools, dzięki czemu widać, które komponenty React odpowiadają poszczególnym elementom na ekranie.

Oto obie funkcje w działaniu:

Wideo przedstawiające opisane zachowanie w akcji. Po lewej stronie znajduje się aplikacja React Native uruchomiona w symulatorze iPhone'a. Po prawej stronie są narzędzia React DevTools. W obu przypadkach kliknięcie elementu w DevTools podświetla odpowiadające mu komponenty w aplikacji.

Hermes​

W React Native 0.70 ustanowiliśmy Hermesa domyślnym silnikiem dla React Native.

W React Native 0.71 ulepszamy Hermesa kilkoma istotnymi ulepszeniami:

  • Ulepszenie map źródłowych: Dzięki ładowaniu map źródłowych przez sieć za pomocą Metro przywróciliśmy możliwość używania map źródłowych w najnowszych wersjach Chrome Dev Tools poza Flipperem.

  • Poprawa wydajności JSON.parse: Ta wersja zawiera optymalizację wydajności, która poprawia działanie JSON.parse nawet o 30%.

  • Dodanie obsługi .at(): Hermes obsługuje teraz metodę .at() dla String, TypedArray i Array.

Pełną listę zmian znajdziesz w wątku Road to 71.

Nowa Architektura​

To wydanie wprowadza wiele ulepszeń do eksperymentalnej Nowej Architektury, opartych na opiniach użytkowników i zgłoszeniach, które zebraliśmy do tej pory.

  • Skrócony czas budowania: Nowy model dystrybucji wykorzystuje Maven Central, co pozwala znacznie skrócić czas budowania na Androida, rozwiązuje wiele problemów z budowaniem na Windowsie i zapewnia płynniejsze doświadczenie z Nową Architekturą. Więcej informacji tutaj.

  • Mniej kodu C++: Teraz możesz włączyć Nową Architekturę bez konieczności dodawania kodu C++ w swojej aplikacji, a szablon aplikacji CLI został oczyszczony z całego kodu C++ i plików CMake. Więcej informacji tutaj.

  • Lepsza hermetyzacja konfiguracji aplikacji na iOS: Na iOS zastosowaliśmy podobne podejście jak na Androida i hermetyzowaliśmy większość logiki konfiguracji Nowej Architektury w klasie RCTAppDelegate, co uprości przyszłe aktualizacje dzięki mniejszej liczbie ręcznie wprowadzanych zmian łamiących kompatybilność.

  • Lepsze zarządzanie zależnościami na iOS: Dla opiekunów bibliotek dodaliśmy nową funkcję install_module_dependencies, którą można wywołać w pliku podspec pakietu, aby zainstalować wszystkie wymagane zależności dla Nowej Architektury.

  • Poprawki błędów i lepsze wsparcie IDE: Naprawiliśmy kilka błędów i problemów (takich jak lepsze wsparcie IDE dla Androida) zgłoszonych przez naszych użytkowników w grupie roboczej Nowej Architektury.

Przypominamy, że Nowa Architektura nadal jest eksperymentalnym interfejsem API, a my wprowadzamy zmiany, aby ułatwić jej przyjmowanie. Wypróbuj nowe uproszczone kroki w dokumentacji Nowej Architektury i prześlij swoją opinię do grupy roboczej Nowej Architektury.

Inne Godne Uwagi Poprawki​

  • Lepsze zwijanie ramek stosu: Zaktualizowaliśmy listę wewnętrznych ramek dla React Native, dzięki czemu LogBox będzie częściej pokazywał Twój kod zamiast wewnętrznych ramek React Native, co pomoże szybciej debugować problemy.

  • Usprawnienia czasu budowania: Przenieśliśmy zasoby do Maven Central dla prefabów, co poprawia czas budowania (zarówno na iOS jak i Android) dla Hermesa w obecnej i nowej architekturze.

  • Ulepszenia szablonu Android: Szablon Androida został gruntownie oczyszczony i teraz w pełni opiera się na React Native Gradle Plugin. Instrukcje konfiguracyjne znajdziesz bezpośrednio w szablonie lub na nowej dedykowanej stronie w dokumentacji.

Zmiany łamiące kompatybilność​

  • Zmiany w logowaniu konsoli: LogBox.ignoreLog nie filtruje już logów konsoli. Oznacza to, że zaczniesz widzieć w konsoli logi, które wyciszyłeś w LogBox. Szczegóły znajdziesz w tym komentarzu.

  • Usunięto AsyncStorage i MaskedViewIOS: Te komponenty były przestarzałe od wersji 0.59, więc nadszedł czas na ich całkowite usunięcie. Alternatywy znajdziesz w React Native Directory wśród pakietów społecznościowych.

  • JSCRuntime przeniesione do react-jsc: react-jsi zostało podzielone na react-jsc i react-jsi. Jeśli używasz JSCRuntime, musisz dodać react-jsc jako zależność (facebook/react-native@6b129d8).

Podziękowania​

Ta wersja była możliwa dzięki pracy ponad 70 współtwórców, którzy dodali ponad 1000 commitów.

Szczególnie dziękujemy osobom zaangażowanym w te kluczowe projekty React Native:

Na koniec podziękowania dla @cortinico, @kelset, @dmytrorykun, @cipolleschi oraz @titozzz za przygotowanie tej wersji!

Wypróbuj wersję 0.71.0 już teraz!​

Użytkownicy React Native CLI mogą zapoznać się z dokumentacją aktualizacji, aby zaktualizować istniejący projekt, lub utworzyć nowy projekt za pomocą npx react-native init MyProject.

Wersja React Native 0.71 będzie obsługiwana w Expo SDK w wersji 48.

informacja

0.71 to obecnie najnowsza stabilna wersja React Native, a wersje 0.68.x nie są już wspierane. Więcej informacji można znaleźć w polityce wsparcia React Native.