React Native 0.76 - Nowa Architektura domyślnie, React Native DevTools i więcej

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 →

Z radością ogłaszamy wydanie React Native 0.76!

To ważny kamień milowy dla React Native, ponieważ domyślnie włączamy Nową Architekturę i wprowadzamy React Native DevTools. To efekt sześcioletniej ciężkiej pracy naszego zespołu oraz wsparcia niesamowitej społeczności programistów.

Najważniejsze zmiany

• Nowa Architektura React Native domyślnie

• React Native DevTools

• Szybsze rozwiązywanie zależności w Metro

• Właściwości stylu Box Shadow i Filter

Zmiany łamiące kompatybilność

• Usunięto zależność od react-native-community/cli

• Aplikacje na Androida są o ~3,8 MB mniejsze dzięki scalaniu natywnych bibliotek

• Aktualizacja minimalnych wymagań SDK dla iOS i Androida

Najważniejsze zmiany

Nowa Architektura React Native domyślnie

Począwszy od React Native 0.76, Nowa Architektura jest domyślnie włączona w twoich projektach. Nowa Architektura to przepisanie wewnętrznych mechanizmów React Native, umożliwiające programistom tworzenie wysokiej jakości natywnych aplikacji przy użyciu Reacta.

Dziś z radością ogłaszamy, że Nowa Architektura jest gotowa do użytku produkcyjnego.

Ta zmiana to kamień milowy w ewolucji React Native i zachęcamy do przeczytania dedykowanego wpisu na blogu, aby zrozumieć, co zawiera Nowa Architektura i jak wpłynie na przyszłość React Native: Nowa Architektura jest już tutaj.

React Native DevTools

Wydajemy pierwszą stabilną wersję React Native DevTools, naszego nowego domyślnego środowiska debugowania.

Chcemy, aby narzędzia, których używasz do debugowania Reacta na wszystkich platformach, były niezawodne, znajome, proste i spójne. React Native DevTools spełnia te zasady — to narzędzia deweloperskie zgodne z przeglądarką, głęboko zintegrowane z React Native. Do kluczowych funkcji należą:

• Znajome, zgodne z webem narzędzia — Pełnoprawny debugger oparty na Chrome DevTools z niezawodnymi punktami przerwania (breakpoints), obserwacją wartości (watch values), debugowaniem krok po kroku (step-through debugging), inspekcją stosu (stack inspection) i bogatą konsolą JavaScript. Te podstawowe funkcje działają teraz niezawodnie, także po przeładowaniach.

• Ulepszone i zintegrowane React DevTools — Wbudowane narzędzia: Inspektor Komponentów i Profiler działają bezproblemowo, zapewniając szybsze i bardziej niezawodne podświetlanie komponentów.

• Ulepszone doświadczenie użytkownika — Zobaczysz nową nakładkę Wstrzymano w debugerze (Paused in Debugger), która jasno wskazuje, kiedy aplikacja jest wstrzymana na punkcie przerwania. Ostrzeżenia w LogBox są teraz wyświetlane jako podsumowanie i ukrywane, gdy DevTools są podłączone.

• Naprawione zachowanie przy ponownym łączeniu — Punkty przerwania w JavaScript działają teraz niezawodnie po przeładowaniach oraz gdy DevTools są odłączane i ponownie podłączane. DevTools mogą nawet ponownie połączyć się z tą samą aplikacją po natywnej przebudowie.

• Natychmiastowe uruchomienie — React Native DevTools jest domyślnie gotowy do użycia bez konfiguracji. Otwórz go z menu deweloperskiego w aplikacji lub za pomocą klawisza j w serwerze CLI, który teraz obsługuje wiele emulatorów i urządzeń.

React Native DevTools zasadniczo różni się od naszych poprzednich opcji debugowania, w tym od doświadczeń z Eksperymentalnym Debuggerem wprowadzonym w wersji 0.73. Przełącza na nowy stos debugowania backendu, który przebudowaliśmy w ciągu ostatniego roku. Oznacza to, że kompatybilność z poprzednimi narzędziami zmieniła się, a także możesz oczekiwać znacznie bardziej niezawodnego działania end-to-end. Planujemy rozbudowę tego stosu, aby w przyszłości niezawodnie implementować kolejne funkcje, takie jak panele Wydajności i Sieci.

Wycofywanie logów w Metro

W kolejnym wydaniu usuwamy przesyłane logi w Metro, aby dostosować się do nowoczesnych narzędzi przeglądarkowych i usunąć stare integracje debugowania. Zamiast tego używaj pełnoprawnego panelu Konsoli w React Native DevTools do logowania. Więcej informacji znajdziesz w naszych FAQ.

Linki

• Zaktualizowana dokumentacja debugowania

• Prezentacja na React Universe Conf

• Wątek z opiniami i FAQ

Szybsze rozwiązywanie zależności w Metro

Wdrożyliśmy kilka ulepszeń wydajności resolvera Metro (komponentu odpowiedzialnego za znajdowanie modułów na podstawie ścieżki importu), przyspieszając go około 15-krotnie. Poprawia to ogólną wydajność Metro, szczególnie przy ponownych budowaniach, które stały się około 4 razy szybsze.

Właściwości stylu Box Shadow i Filter

Dodaliśmy dwie nowe właściwości stylu dostępne tylko w Nowej Architekturze w wersji 0.76 - boxShadow i filter. Obie istnieją w środowisku webowym, a zespół trzyma się specyfikacji tam, gdzie to możliwe, aby były przewidywalne, znajome i łatwiejsze do adaptacji (wyjątki opisano w sekcjach ograniczeń i odstępstw). Dzięki temu możesz zajrzeć do dokumentacji webowej, by zrozumieć ich działanie, ale poniżej odnotowano kilka istotnych różnic.

boxShadow

boxShadow dodaje cień do elementu z kontrolą pozycji, koloru, rozmiaru i rozmycia. Pełny przegląd argumentów znajdziesz w dokumentacji MDN wraz z interaktywnym przykładem. Poniżej kilka możliwych efektów cieniowania.

boxShadow akceptuje albo ciąg znaków (odpowiadający składni CSS), albo obiekty JS z osadzonymi zmiennymi. Przykładowo ciąg ‘5 5 5 0 rgba(255, 0, 0, 0.5)’ i obiekt {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: ‘rgba(255, 0, 0, 0.5)’} dadzą identyczny cień.

Poprzednia funkcjonalność cieni miała ograniczenia, które rozwiązuje boxShadow:

• Nie działała na Androida

• Nie obsługuje inset

• Nie obsługuje parametru spread

• Nie działa na komponentach View bez ustawionego koloru tła

• Jest osobną właściwością (prop), więc nie może używać identycznej składni jak wersja webowa

Ograniczenia i odstępstwa od specyfikacji

• Domyślny kolor cienia to czarny (nie kolor elementu nadrzędnego)

• Zwykłe cienie na Androidzie obsługiwane od wersji Android 9+

• Wewnętrzne cienie (inset) na Androidzie obsługiwane od wersji Android 10+

filter

filter nakłada efekty graficzne na element. Obejmuje zarówno filtry kolorów (modyfikujące jasność, nasycenie, odcień), jak i efekty pozakolorowe (rozmycia, cienie). Pełną listę funkcji filtrujących znajdziesz w dokumentacji MDN wraz z edytorem do testowania. Poniżej przykład obrazka hot doga z różnymi filtrami.

From left to right: no filter, saturate filter, blur filter, invert filter

Podobnie jak boxShadow, właściwość filter może przyjąć albo ciąg znaków odpowiadający składni CSS, albo tablicę obiektów JS, które mogą zawierać zmienne. Na przykład ciąg ‘saturate(0.5) grayscale(0.25)’ i tablica [{saturate: 0.5}, {grayscale: 0.25}] dadzą ten sam efekt filtra. Wartość dropShadow w filter różni się nieco od boxShadow. Największa różnica polega na tym, że dropShadow działa jak maska alfa — cień będzie rzucany tylko przez piksele o niezerowej składowej alfa. Natomiast boxShadow będzie rzucać cień wokół ramki elementu, nawet jeśli w środku nic się nie znajduje. Dodatkowo, dropShadow nie ma parametru rozmycia (spread distance) i nie może być cieniem wewnętrznym (inset).

Ograniczenia i odstępstwa od specyfikacji

• filter na iOS obsługuje tylko jasność i przezroczystość

• filter na iOS nie działa na cieniach, obrysach ani elementach graficznych poza granicami elementu

• blur i drop-shadow na Androidzie obsługiwane od wersji Android 12+

• filter implikuje overflow: hidden, więc elementy potomne elementu z filter zostaną przycięte, jeśli wykraczają poza granice rodzica

Zmiany łamiące kompatybilność

Usunięcie zależności od @react-native-community/cli

Jak wcześniej informowaliśmy w wersji 0.75, naszą wizją jest, aby React Native był framework agnostic. Dlatego zakończyliśmy pracę nad usunięciem @react-native-community/cli jako bezpośredniej zależności React Native.

Rozdzielenie React Native i CLI pozwoli nam na szybsze, niezależne wydawania obu projektów i klarowniejszy podział odpowiedzialności.

Jeśli używasz CLI w codziennej pracy, pamiętaj o jawnej dodaniu zależności w swoim package.json:

//…
  “devDependencies”: {
   // …
+  “@react-native-community/cli”: “15.0.0”,
+  "@react-native-community/cli-platform-android": “15.0.0”,
+  "@react-native-community/cli-platform-ios": “15.0.0”,
  },

Aplikacje na Androida o ~3,8 MB mniejsze dzięki scaleniu bibliotek natywnych

React Native 0.76 zawiera mniej bibliotek natywnych, ponieważ połączyliśmy ich kod w pojedynczą bibliotekę libreactnative.so.

Zmiana zmniejsza rozmiar aplikacji i poprawia czas uruchamiania na Androidzie. Według testów rozmiar aplikacji zmniejszy się o ~3,8 MB (20% całości), a mediana czasu uruchamiania skróci się o ~15 ms (~8%) (źródło).

Z drugiej strony, jest to zmiana łamiąca kompatybilność dla twórców aplikacji i bibliotek.

Twórcy aplikacji będą musieli zaktualizować metodę onCreate w swojej aplikacji w następujący sposób:

+import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {

  override fun onCreate() {
    super.onCreate()
+   SoLoader.init(this, OpenSourceMergedSoMapping)
-   SoLoader.init(this, false)
  }
}

Ta zmiana jest niezbędna do poprawnego ładowania biblioteki libreactnative.so i jest uwzględniona w upgrade-helperze.

Autorzy bibliotek nie będą dotknięci tą zmianą, chyba że posiadają własny kod C++.

Aby zagłębić się w techniczne szczegóły tej zmiany i poznać sugestie dla autorów bibliotek, więcej informacji znajdziesz w dedykowanym poście.

Aktualizacje minimalnych wymagań SDK dla iOS i Androida

Zaktualizowaliśmy minimalne wymagania wersji platform i SDK:

• iOS - z wersji 13.4 do 15.1

• Android - z SDK 23 do SDK 24 (Android 7)

Ta zmiana została zapowiedziana wcześniej tego roku przy wydaniu wersji 0.75 która była ostatnią wspierającą minSDK 23 i minIOSVersion 13.4. Więcej szczegółów znajdziesz w dedykowanych postach dla Androida i iOS.

Inne zmiany łamiące kompatybilność

• Animacje

  • Zatrzymano wysyłanie aktualizacji stanu do Reacta w animacjach zapętlających. Powodowało to niepotrzebne ponowne renderowanie.

• narzędzia deweloperskie:

  • Usunięto zakładki wydajności i sieci w panelu inspektora w Nowej Architekturze. (RFC)

• silnik tekstu

  • Zawsze używaj AttributedStringBox zamiast AttributedString w TextLayoutManager

Android

• renderowanie:
  • Tła widoków nie są już bezpośrednio ReactViewBackgroundDrawable ani CSSBackgroundDrawable

iOS

• moduły turbowe:
  • Usunięto makro RCT_EXPORT_CXX_MODULE_EXPERIMENTAL do automatycznego linkowania modułów C++.

Podziękowania

React Native 0.76 zawiera ponad 1070 commitów od 156 współtwórców. Dziękujemy za waszą ciężką pracę!

Dziękujemy wszystkim dodatkowym autorom, którzy pracowali nad dokumentowaniem funkcji w tym poście o wydaniu:

• Joe Vilches i Nick Gerleman za właściwości stylów box-shadow i filter.

• Alex Hunt za React Native DevTools.

• Nicola Corti za dostarczanie Androida jako pojedynczej biblioteki.

Aktualizacja do wersji 0.76

Do sprawdzenia zmian w kodzie między wersjami React Native w istniejących projektach, oprócz dokumentacji aktualizacji, użyj React Native Upgrade Helper.

Jeśli używasz Expo, React Native 0.76 będzie obsługiwany w Expo SDK 52.

Jeśli potrzebujesz utworzyć nowy projekt za pomocą CLI, możesz uruchomić to polecenie:

npx @react-native-community/cli@latest init MyProject --version latest

informacja

0.76 to teraz najnowsza stabilna wersja React Native, a wersja 0.73.x przechodzi do kategorii nieobsługiwanych. Więcej informacji znajdziesz w polityce wsparcia React Native. Planujemy opublikować ostatnią aktualizację kończącą wsparcie dla wersji 0.73 w najbliższej przyszłości.