Przejdź do treści głównej

React Native 0.78 - React 19 i więcej

· 9 minut czytania
Vojtech Novak
Vojtech Novak
Software Engineer @ Expo
Shubham Gupta
Shubham Gupta
Software Engineer @ Dream11
Fabrizio Cucci
Fabrizio Cucci
Software Engineer @ Meta
Riccardo Cipolleschi
Riccardo Cipolleschi
Software Engineer @ Meta
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 przyjemnością ogłaszamy wydanie React Native 0.78!

Ta wersja dostarcza React 19 w React Native oraz inne istotne funkcje, takie jak natywna obsługa Android Vector drawables i lepsza integracja brownfield dla iOS.

Najważniejsze zmiany​

Najważniejsze zmiany​

React 19​

React 19 jest już dostępny w React Native!

React 19 wymaga aktualizacji Twojej aplikacji, ponieważ wprowadziliśmy zmiany względem React 18. Na przykład usunęliśmy niektóre API jak propTypes, więc musisz dostosować aplikację do nowej wersji Reacta.

Postępuj zgodnie z naszym przewodnikiem aktualizacji krok po kroku.

Po migracji będziesz mógł wykorzystać wszystkie nowe funkcje Reacta, w tym (między innymi):

  • Actions: funkcje wykorzystujące asynchroniczne przejścia. Przejścia te automatycznie zarządzają przesyłaniem danych: obsługują stany oczekiwania, optymistyczne aktualizacje, obsługę błędów i więcej.

  • useActionState: hook pomocniczy działający na bazie Actions. Przyjmuje funkcję i zwraca opakowane Action do wywołania. Po wywołaniu akcji zwróci ostatni wynik Action i jej stan pending.

  • useOptimistic: nowy hook upraszczający optymistyczne wyświetlanie końcowego stanu aktualizacji podczas trwania żądania asynchronicznego. Jeśli żądanie zwróci błąd, React automatycznie przywróci poprzednią wartość.

  • use: nowe API umożliwiające dostęp do zasobów podczas renderowania. Możesz teraz odczytać promise lub kontekst za pomocą use, a React zawiesi się (Suspend) do momentu ich rozwiązania.

  • ref as props: możesz teraz przekazywać ref jako prop tak jak inne właściwości. Komponenty funkcyjne nie będą już wymagały forwardRef - możesz migrować swoje komponenty.

  • I wiele innych

Pełną listę nowych funkcji znajdziesz w wpisie o wydaniu React 19.

React Compiler​

React Compiler to narzędzie działające w fazie budowania aplikacji, zaprojektowane do optymalizacji aplikacji React poprzez automatyczne stosowanie memoizacji. Chociaż programiści mogą ręcznie używać API takich jak useMemo, useCallback i React.memo, aby zapobiec niepotrzebnemu przeliczaniu niezmienionych części aplikacji, mogą też o tym zapomnieć lub niewłaściwie stosować te optymalizacje. React Compiler rozwiązuje ten problem, wykorzystując swoje zrozumienie JavaScript oraz Zasad Reacta do automatycznego memoizowania wartości lub grup wartości w komponentach i hookach.

W tym wydaniu uprościliśmy proces włączania React Compiler w aplikacjach React Native. W poprzednich wersjach trzeba było instalować dwa pakiety: kompilator i jego środowisko uruchomieniowe. Po ich zainstalowaniu należało skonfigurować wtyczkę Babel, aby włączyć React Compiler przez Metro.

Teraz wystarczy zainstalować sam kompilator i skonfigurować wtyczkę Babel. Aby dowiedzieć się, jak go włączyć, możesz skorzystać z naszego przewodnika krok po kroku.

Aby sprawdzić, czy kompilator działa, możesz otworzyć React Native DevTools: powinieneś zobaczyć, że komponenty, które są zmemoizowane, mają dołączoną etykietę Memo ✨ w Inspektorze Komponentów.

Jeśli chcesz dowiedzieć się więcej o React Compiler, pomocne będą te materiały:

W kierunku mniejszych i szybszych wydań​

Aktualizujemy nasz proces wydawniczy, aby w 2025 roku wydawać stabilne wersje React Native częściej.

Aktualizowanie wersji React Native będzie łatwiejsze, ponieważ zmniejszymy liczbę wprowadzanych zmian łamiących kompatybilność. Szybsze wydania oznaczają też, że wszystkie poprawki błędów, które wprowadzamy wewnętrznie, docierają do Was wcześniej, a Wy możecie korzystać z najnowszych funkcji rozwijanych w React Native.

Wierzymy, że ten nowy model przyniesie korzyści każdemu programiście w ekosystemie React Native, ponieważ mniejsza liczba zmian łamiących kompatybilność oznacza stabilniejsze frameworki, na których każdy może polegać.

Opcja włączania logów JavaScript w Metro​

Dodaliśmy opcję przywrócenia przesyłania logów JavaScript przez serwer deweloperski Metro, wcześniej usuniętą w wersji 0.77 dla użytkowników Community CLI. Jest to odpowiedź na opinie użytkowników oraz przegląd obecnego stanu naszych zamiennych rozwiązań.

Aby włączyć tę opcję, użyj nowej flagi --client-logs. Dla wygody można też utworzyć alias w skrypcie npm.

npx @react-native-community/cli start --client-logs

Przesyłanie logów w Metro nadal będzie wycofywane w przyszłości i domyślnie pozostaje wyłączone. Zamierzamy jednak dać programistom dłuższy okres przejściowy na dostosowanie się do tej zmiany.

Ta aktualizacja będzie też dostępna w nadchodzącym wydaniu pomniejszym 0.77.1.

Dodano obsługę zasobów graficznych Android XML​

W React Native 0.78 wprowadzamy nowy sposób ładowania ikon, ilustracji i innych elementów graficznych na Androidzie jako zasoby XML. Oznacza to, że możesz używać wektorowych zasobów graficznych do wyświetlania obrazów wektorowych w dowolnej skali bez utraty jakości lub zasobów kształtów do rysowania prostszych elementów. Wszystko to jest obsługiwane przez ten sam znany i lubiany komponent Image. Aby korzystać z tej funkcji, możesz importować zasoby XML jak każdy inny zasób statyczny, odwołując się do nich we właściwości source. Co więcej, używanie zasobów XML zamiast bitmap pomoże zmniejszyć rozmiar aplikacji i zapewni lepsze renderowanie na ekranach o różnych gęstościach pikseli (DPI).

// via require
<Image
  source={require('./img/my_icon.xml')}
  style={{width: 40, height: 40}}
/>;

// or via import
import MyIcon from './img/my_icon.xml';
<Image source={MyIcon} style={{width: 40, height: 40}} />;

Wydajność i jakość​

Podobnie jak inne typy grafik, zasoby XML w Androidzie są ładowane i przetwarzane poza wątkiem głównym, dzięki czemu nie tracisz klatek. Oznacza to, że zasób nie pojawi się natychmiast, ale jednocześnie nie blokuje interakcji użytkownika podczas ładowania. Przetwarzanie poza wątkiem głównym jest szczególnie ważne przy renderowaniu wielu ikon jednocześnie. Wewnętrzne aplikacje odnotowały znaczną poprawę wydajności przy użyciu wektorowych drawable'ów Androida.

Wykorzystanie wektorowych drawable'ów to idealny sposób na wyświetlanie grafik bez utraty jakości, co może skutkować mniejszymi plikami APK (nie trzeba uwzględniać różnych wersji obrazów dla różnych gęstości ekranu). Co więcej, wektorowe drawable'e są kopiowane z pamięci tylko raz – jeśli renderujesz tę samą ikonę wielokrotnie, wszystkie pojawią się jednocześnie.

Kompromisy​

Warto pamiętać, że zasoby drawable w formacie XML mają pewne ograniczenia:

  • Muszą być referencjonowane podczas budowania aplikacji na Androida. Te zasoby są przetwarzane przez Android Asset Packaging Tool (AAPT), który konwertuje surowy XML na binarny XML. Android nie obsługuje ładowania surowych plików XML – to znane ograniczenie.

  • Nie mogą być ładowane przez Metro z sieci. Jeśli zmienisz nazwę lub lokalizację zasobu XML, musisz przebudować aplikację za każdym razem.

  • Nie mają wymiarów. Domyślnie wyświetlają się z rozmiarem 0x0, więc musisz ręcznie podać szerokość i wysokość.

  • Nie są w pełni konfigurowalne w czasie działania; możesz kontrolować tylko wymiary lub ogólny kolor, ale nie poszczególne elementy wewnątrz zasobu (np. grubość linii, promień zaokrąglenia, kolory). Takie modyfikacje wymagają różnych wariantów zasobu XML.

informacja

Wektorowe drawable'e Androida nie są bezpośrednim zamiennikiem bibliotek takich jak react-native-svg. Są zaprojektowane specjalnie dla Androida i nie działają na iOS. Jeśli chcesz używać tych samych SVG na wszystkich platformach, nadal musisz korzystać z react-native-svg. Wektorowe drawable'e oferują korzyści wydajnościowe kosztem możliwości dostosowywania.

ReactNativeFactory na iOS​

W React Native 0.78 poprawiliśmy integrację z iOS.

Ta wersja wprowadza nową klasę RCTReactNativeFactory, która pozwala tworzyć instancje React Native bez potrzeby modyfikowania AppDelegate. Dzięki temu możesz np. utworzyć nową instancję React Native w ViewControllerze, co znacząco upraszcza integrację z aplikacjami typu brownfield.

Wyobraź sobie, że chcesz wyświetlić widok React Native w ViewControllerze swojej aplikacji. Od wersji 0.78, po zainstalowaniu zależności zgodnie z tym przewodnikiem, wystarczy dodać ten kod:


+import React
+import React_RCTAppDelegate

public class ViewController {

+  var reactNativeFactory: RCTReactNativeFactory?
+  var reactNativeDelegate: ReactNativeDelegate?

  public func viewdidLoad() {
    super.viewDidLoad()
    // …
+ reactNativeDelegate = ReactNativeDelegate()
+ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeDelegate!)
+ view = reactNativeFactory.rootViewFactory.view(withModuleName: "<your module name>")
  }

}

+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {

+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    self.bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+    #if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+    #else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+    #endif
+  }
+}

React Native załaduje się w ViewControllerze natychmiast po przejściu do niego.

Ten kod tworzy RCTReactNativeFactory, przypisuje delegata i prosi o utworzenie rootView dla widoku React Native.

Poniższy delegat nadpisuje właściwości sourceURL i bundleURL, aby wskazać React Native, gdzie znajdzie pakiet JS do załadowania w widoku.

Inne zmiany łamiące kompatybilność​

Ogólne​

  • React Native DevTools

    • Usunięto domenę CDP FuseboxClient

  • Codegen

    • Wydzielono typy tablic komponentów i tablic komend

Android​

  • Zmiany nullowalności: migracja RootView do Kotlina spowodowała zmianę typów parametrów z nullowalnych na nienullowalne.

  • Następujące klasy zostały przeniesione z publicznych do wewnętrznych lub usunięte i nie są już dostępne:

    • com.facebook.react.bridge.GuardedResultAsyncTask
    • com.facebook.react.uimanager.ComponentNameResolver
    • com.facebook.react.uimanager.FabricViewStateManager
    • com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager

iOS​

  • Zmiana informacji o rozmiarze w zdarzeniach ładowania obrazów z rozmiaru logicznego na piksele (dotyczy wyłącznie starej architektury)

Podziękowania​

React Native 0.78 zawiera ponad 509 commitów od 87 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:

Aktualizacja do wersji 0.78​

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

Aby utworzyć nowy projekt:

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

Jeśli używasz Expo, React Native 0.78 będzie obsługiwane w wersji canary Expo SDK.

informacja

0.78 jest teraz najnowszą stabilną wersją React Native, a 0.75.x przechodzi do stanu nieobsługiwanego. Więcej informacji znajdziesz w polityce wsparcia React Native. Planujemy opublikować końcową aktualizację końca cyklu życia wersji 0.75 w najbliższym czasie.