React Native 0.77 – Nowe funkcje stylowania, obsługa stron 16 KB w Androidzie, szablon w Swift

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.77!

Ta wersja wprowadza kilka funkcji: nowe możliwości stylowania, takie jak obsługa właściwości display: contents, boxSizing, mixBlendMode i związanych z outline, które zapewniają potężniejsze opcje układu; obsługę stron 16 KB w Androidzie dla kompatybilności z nowszymi urządzeniami. Modernizujemy również szablon społecznościowy poprzez migrację do Swifta, jednocześnie utrzymując wsparcie i kompatybilność z Objective-C dla deweloperów preferujących ten język.

Najważniejsze zmiany

• Nowe funkcje CSS dla lepszego układu, wymiarowania i mieszania

• Obsługa Androida w wersji 15 i stron 16 KB

• Aktualizacje szablonu i CLI społecznościowego

Zmiany łamiące kompatybilność

• Usunięcie przesyłania console.log() w Metro

Najważniejsze zmiany

Nowe funkcje CSS dla lepszego układu, wymiarowania i mieszania

React Native 0.77 przybliża nas do celu wyrównania możliwości z technologiami webowymi. Dodaliśmy obsługę nowych właściwości CSS, dając większą kontrolę nad układem, wymiarowaniem i mieszaniem w aplikacji. Zmiany te pomagają upraszczać skomplikowane układy, dodawać teksturę i zwiększać dostępność aplikacji.

informacja

Wszystkie nowe funkcje są dostępne wyłącznie w Nowej Architekturze.

Prostsze układy z display: contents

Właściwość display: contents pozwala elementowi zniknąć ze struktury układu, podczas gdy jego dzieci są renderowane jako bezpośrednie potomki elementu nadrzędnego. Przydaje się przy stylowaniu, gdy chcesz zastosować style do elementów potomnych bez wpływu na układ, przy budowaniu komponentów opakowujących obsługujących zdarzenia lub przy interakcji z ShadowTree.

Technicznie, display: contents renderuje element bez generowania boxu układu, ale zachowuje boxy układu dzieci elementu. Element z display: contents jest efektywnie spłaszczany w hierarchii widoku.

Przyjrzyjmy się przykładowi, gdzie chcemy wyświetlić alert po naciśnięciu widżetu. Mamy czerwony Widget wewnątrz widoku kontenera:

Container.jsx

function Container() {
  return (
    <View style={styles.container}>
      <Widget />
    </View>
  );
}

Stwórzmy nowy komponent opakowujący Alerting, którego celem jest powiadamianie użytkownika po naciśnięciu komponentu pod spodem, używając eksperymentalnych zdarzeń wskaźnikowych. Dla przejrzystości tło tego komponentu jest niebieskie. Może to wyglądać jak poniższy komponent:

Container.jsx

function Alerting({children}) {
  return (
    <View
      style={{backgroundColor: 'blue'}}
      onPointerDown={() => alert('Hello World!')}>
      {children}
    </View>
}

function Container() {
  return (
    <View style={styles.container}>
      <Alerting>
        <Widget />
      </Alerting>
    </View>
  );
}

To nie działa dokładnie tak, jak chcemy. Alerting dodaje nowy box układu z własnymi granicami, oddzielony od dziecka Widget. W zależności od stylowania opakowywanego elementu może to powodować znaczące zmiany wizualne i funkcjonalne. W tym przykładzie niebieskie tło reaguje na dotknięcia alertem, podczas gdy chcemy, aby tylko czerwone pole "Hello World" wyświetlało alert po naciśnięciu.

Gdy próbujemy ponownie, ustawiając display: contents na opakowaniu View komponentu Alerting, widzimy alerty tylko po naciśnięciu w oryginalnych granicach Widget. Dzieje się tak, ponieważ Alerting nie dodaje już własnego boxu, ale nadal może obserwować zdarzenia wskaźnikowe bąbelkujące z Widget.

Container.jsx

function Alerting({children}) {
  return (
    <View
      style={{display: 'contents'}}
      onPointerDown={() => alert('Hello World!')}>
      {children}
    </View>
  );
}

// ... function Container ...

Rozmiar boxa (box sizing)

Właściwość boxSizing definiuje sposób obliczania różnych właściwości rozmiaru elementu (width, height, minWidth, minHeight, itp.). Gdy boxSizing ma wartość border-box, te rozmiary dotyczą border boxa elementu. Gdy jest content-box, dotyczą one content boxa elementu. Wartość domyślna to border-box, co różni się od wartości domyślnej w sieci. Dokumentacja MDN jest dobrym źródłem informacji, jeśli chcesz dowiedzieć się więcej o działaniu tej właściwości.

ostrzeżenie

border-box jest domyślną wartością od zawsze i była jedyną wartością boxSizing aż do dodania content-box. Zmiana wartości domyślnej byłaby zmianą łamiącą kompatybilność, która nagle zepsułaby wiele układów. Postanowiliśmy zachować border-box jako wartość domyślną, aby zapewnić wsteczną kompatybilność.

Aby zrozumieć różnicę między border-box a content-box, spójrz na te przykłady, w których oba View mają padding: 20 i borderWidth: 10. Przy użyciu border-box do rozmiaru wliczamy border i padding; przy użyciu content-box bierzemy pod uwagę tylko zawartość (content) dla rozmiaru.

CSS mixBlendMode

Właściwość mixBlendMode pozwala kontrolować, jak element miesza swoje kolory z innymi elementami w swoim kontekście ułożenia (stacking context). Zapoznaj się z dokumentacją MDN, aby uzyskać pełny przegląd każdej funkcji mieszania.

Aby umożliwić bardziej szczegółową kontrolę nad tym, co jest mieszane, dodaliśmy również właściwość isolation. Ustawienie isolation: isolate na View wymusi utworzenie kontekstu ułożenia (stacking context). Możesz więc ustawić to na jakimś nadrzędnym View, aby zapewnić, że potomny View z mixBlendMode nie będzie mieszał kolorów poza izolowanym View.

Wartości mixBlendMode

• normal: Element jest rysowany na tle bez mieszania.

• multiply: Kolor źródłowy jest mnożony przez kolor docelowy i zastępuje docelowy.

• screen: Mnoży dopełnienia kolorów tła i źródła, a następnie dopełnia wynik.

• overlay: Mnoży lub wyświetla (screen) kolory, w zależności od wartości koloru tła.

• darken: Wybiera ciemniejszy z kolorów tła i źródła.

• lighten: Wybiera jaśniejszy z kolorów tła i źródła.

• color-dodge: Rozjaśnia kolor tła, aby odzwierciedlić kolor źródłowy. Malowanie czernią nie powoduje zmian.

• color-burn: Przyciemnia kolor tła, aby odzwierciedlić kolor źródłowy. Malowanie bielą nie powoduje zmian.

• hard-light: Mnoży lub wyświetla (screen) kolory, w zależności od wartości koloru źródłowego. Efekt jest podobny do oświetlania tła ostrym światłem punktowym.

• soft-light: Przyciemnia lub rozjaśnia kolory, w zależności od wartości koloru źródłowego. Efekt jest podobny do oświetlania tła rozproszonym światłem punktowym.

• difference: Odejmuje ciemniejszy z dwóch składowych kolorów od jaśniejszego koloru.

• exclusion: Tworzy efekt podobny do trybu Difference, ale o mniejszym kontraście.

• hue: Tworzy kolor z odcieniem (hue) koloru źródłowego oraz nasyceniem i jasnością koloru tła.

• saturation: Tworzy kolor z nasyceniem koloru źródłowego oraz odcieniem i jasnością koloru tła.

• color: Tworzy kolor o barwie i nasyceniu koloru źródłowego oraz jasności koloru tła. Zachowuje poziomy szarości tła i jest przydatny do kolorowania obrazów monochromatycznych lub barwienia obrazów kolorowych.

• luminosity: Tworzy kolor o jasności koloru źródłowego oraz barwie i nasyceniu koloru tła. Daje to efekt odwrotny do trybu Color.

Właściwości outline

Wprowadziliśmy również właściwości outlineWidth, outlineStyle, outlineSpread i outlineColor. Działają one bardzo podobnie do odpowiednich właściwości border, ale są renderowane wokół border box (ramki granicznej), a nie wokół padding box (ramki dopełnienia). Te właściwości pozwalają podświetlać elementy poprzez rysowanie ich konturu bez wpływu na układ.

Więcej szczegółów znajdziesz w dokumentacji MDN.

Wsparcie dla Androida w wersji 15 i obsługa stron 16 KB

Wymuszone edge-to-edge w Androidzie 15

W poprzedniej wersji podjęliśmy już prace nad wsparciem dla Androida 15. Jedną z zauważalnych zmian w Androidzie 15 jest wymuszone wyświetlanie w trybie edge-to-edge podczas budowania aplikacji z targetSdk ustawionym na 35.

Jeśli jeszcze tego nie sprawdziłeś, zapoznaj się z naszym wcześniejszym zaleceniem dotyczącym obsługi tej zmiany, ponieważ ignorowanie jej może uszkodzić interfejs użytkownika w twojej aplikacji.

uwaga

Jeśli używasz w swojej aplikacji react-native-safe-area-context, ta biblioteka już obsługuje za Ciebie wymuszone edge-to-edge.

Obsługa rozmiaru strony 16 KB w Androidzie

Android 15 wprowadza obsługę rozmiaru strony pamięci 16 KB, co umożliwia poprawy wydajności dla aplikacji, ale powoduje potencjalną niezgodność aplikacji opartych na 4 KB na przyszłych urządzeniach. Obecnie jest to funkcja opcjonalna dla deweloperów, pozwalająca testować na wybranych urządzeniach i przygotować się na domyślny rozmiar strony 16 KB w systemie operacyjnym.

Dzięki wydaniu wersji 0.77, React Native jest gotowy do pełnego wsparcia rozmiaru strony 16 KB, a deweloperzy mogą testować i publikować aplikacje dla urządzeń 16 KB.

Więcej informacji o wsparciu 16 KB znajdziesz na oficjalnej stronie dla deweloperów Androida.

Aktualizacje Community CLI i szablonów

Community CLI: Wycofanie polecenia react-native init

Ta wersja całkowicie kończy proces wycofywania polecenia react-native init, które wprowadzono w React Native 0.75.

Przypominamy, że nie będziesz już mógł używać polecenia react-native init, ale musisz:

• Użyć frameworka takiego jak Expo, z własnym dedykowanym poleceniem do tworzenia nowego projektu: npx create-expo-app

• Wywołać Community CLI bezpośrednio: npx @react-native-community/cli init

Community CLI: Usunięcie skrótów klawiszowych "uruchom na iOS/Android" z Metro

W tej wersji usunęliśmy skróty klawiszowe 'a' i 'i' z Metro. Te skróty były używane do wywoływania poleceń run-android i run-ios z Community CLI. Te skróty klawiszowe zapewniały gorsze doświadczenie deweloperskie i były rzadko używane. Uważamy też, że frameworki lepiej nadają się do orkiestracji wyników terminala.

Więcej o tej zmianie przeczytasz w dedykowanym poście.

Szablon społeczności: Swift jako język programowania dla aplikacji iOS

informacja

Projekty używające Expo nie powinny być dotknięte tą zmianą.

Ta zmiana pozwoliła nam uprościć szablon społecznościowy poprzez zastąpienie trzech plików (main.m, AppDelegate.h i AppDelegate.mm) pojedynczym, nowym AppDelegate.swift.

Technicznie jest to zmiana łamiąca kompatybilność: w narzędziu do aktualizacji zobaczysz zmianę z Objective-C na Swift w następujący sposób:

Nie musisz migrować do Swifta: wariant szablonu iOS w Objective-C++ nadal jest obsługiwany (pamiętaj, że nadal musisz zintegrować RCTAppDependencyProvider). Nowe projekty będą generowane przy użyciu Swifta jako języka aplikacji iOS, chociaż zawsze możesz wrócić do Objective-C, jeśli zajdzie taka potrzeba.

Ograniczenia

Jeśli twoja aplikacja zawiera moduły lokalne napisane w C++, nie będziesz mógł zarejestrować ich w Swift, jak pokazano w tym przewodniku.

Jeśli twoja aplikacja należy do tej kategorii, pomiń migrację AppDelegate do Swifta i kontynuuj używanie Objective-C++.

Rdzeń React Native jest głównie rozwijany w C++ w celu współdzielenia kodu między iOS, Androidem i innymi platformami. Interoperacyjność między Swiftem a C++ nie jest jeszcze dojrzała ani stabilna. Pracujemy nad sposobami wypełnienia tej luki, aby umożliwić migrację do Swifta.

RCTAppDependencyProvider

React Native 0.77 nieznacznie zmienia sposób ładowania zależności innych firm. To nowa linia w szablonie społecznościowym, której pominięcie może powodować problemy w czasie działania. Upewnij się, że ją dodałeś.

Odpowiednik w Objective-C wygląda następująco:

AppDelegate.mm

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"<Your app Name>";
  self.dependencyProvider = [RCTAppDependencyProvider new];
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

// remaining of the AppDelegate

Zmiany łamiące kompatybilność

Usunięcie przesyłania console.log() w Metro

Chcemy, aby każdy aspekt debugowania w React Native działał niezawodnie i odpowiadał funkcjonalności nowoczesnych narzędzi przeglądarkowych. Aby spełnić te wymagania, przesyłanie logów przez Metro (wcześniej przestarzałe w wersji 0.76) zostało usunięte w wersji 0.77.

Ta integracja opierała się na niestandardowym podejściu do komunikacji z urządzeniem docelowym. Dzięki tej zmianie przechodzimy wyłącznie na protokół Chrome DevTools (CDP).

• Aby przeglądać logi JS, użyj React Native DevTools i jego pełnoprawnego panelu Konsola — obsługuje filtrowanie logów, inspekcję obiektów, wyrażenia na żywo i więcej.

• Możesz także podłączyć VS Code jako debuger CDP za pomocą rozszerzeń innych firm, takich jak Expo Tools i Radon IDE.

  • Uwaga: te integracje nie są bezpośrednio obsługiwane przez zespół Reacta. Pracujemy jednak nad oficjalnym wsparciem dla VS Code w 2025 roku.

• Expo nadal oferuje przesyłanie logów w Expo CLI.

Więcej informacji znajdziesz w artykule Dlaczego logi JavaScript opuszczają Metro?

Inne zmiany łamiące kompatybilność

Ogólne

• Animacja

  • Natywna animacja zapętlona nie wysyła aktualizacji stanu Reacta przy każdym zakończeniu pętli.

• Układ

  • Wartość position przyklejonych nagłówków w ScrollView będzie teraz brana pod uwagę.
  • Pozycjonowanie absolutne działa teraz w bardziej zgodny sposób

• Moduły JS:

  • Usunięto moduł ReactFabricInternals
    • Moduł ten nie będzie już dostępny

• Moduły natywne

  • Obiekt NativeModules może teraz ładować turbomodule w JS.
    • Poprawia to kompatybilność między modułami natywnymi a turbomodulami

• Pakiety

  • dev-middleware: Frameworki powinny określać serverBaseUrl względem hosta middleware

• Zmiany w API:

  • Usunięto typ useConcurrentRoot z AppRegistry, ponieważ był już ignorowany
  • Usunięto właściwość refs z definicji TypeScript dla NativeMethods.

• Zmiany w UX:

  • Usunięto "run on iOS" i "run on Android" z poleceń klawiszowych serwera deweloperskiego

Android

• Kotlin

  • To pierwsza wersja React Native budowana z Kotlinem 2.0.21. Więcej o zmianach w Kotlinie 2.0 można przeczytać w notatkach wydawniczych języka.

• Zmiany w API:

  • Nullowalność:
    • Gettery nieprymitywne w ReadableArray są teraz poprawnie typowane jako opcjonalne
    • Metoda ReactHost.createSurface() została oznaczona jako nie nullowalna
  • Zmiana nazw:
    • DevSupportManagerBase.getCurrentContext() → DevSupportManagerBase.getCurrentReactContext()

Dodatkowo usunięto lub ograniczono widoczność kilku interfejsów API, więc nie są już dostępne. Były to wewnętrzne API niepotrzebne bezpośrednio deweloperom React Native. Pełną listę znajdziesz poniżej:

List of Removed Android APIs:

The following packages are now internal and can’t be accessed anymore:

• com.facebook.react.views.progressbar
• com.facebook.react.views.safeareaview
• com.facebook.react.modules.accessibilityinfo
• com.facebook.react.modules.appstate
• com.facebook.react.modules.clipboard
• com.facebook.react.modules.devmodule
• com.facebook.react.modules.reactdevtoolssettings
• com.facebook.react.views.unimplementedview

The following classes are now either internal or have been removed, so can’t be accessed anymore:

• BackHandler.removeEventListener
• BaseViewManagerInterface
• BindingImpl
• CompositeReactPackage
• DebugOverlayTags
• Method create() from DefaultDevSupportManagerFactory
• DevToolsReactPerfLogger
• FabricComponents
• ImageStoreManager
• InteropModuleRegistry
• NativeModulePerfLogger
• NoopPrinter
• NotThreadSafeViewHierarchyUpdateDebugListener
• OkHttpCallUtil
• PrinterHolder
• Printer
• ReactDebugOverlayTags
• ReactNativeFlipper
• ReactViewBackgroundManager
• ReactViewGroup.getBackgroundColor()
• ReactVirtualTextShadowNode
• ReactVirtualTextViewManager
• SimpleSettableFuture
• SwipeRefreshLayoutManager
• TaskCompletionSource
• Parameter jsBundleLoader from DefaultReactHost.getDefaultReactHost()

iOS

• Zmiany w API

  • Usunięto:
    • RCTConstants.RCTGetMemoryPressureUnloadLevel
    • partialBatchDidFlush
    • RCTRuntimeExecutor
    • UseNativeViewConfigsInBridgelessMode
      • Zastąpione właściwą flagą funkcji
    • UseTurboModuleInteropForAllTurboModules
      • Warstwa interop jest zawsze włączona dla TM
  • Zmieniono:
    • Zastąpiono użycia CGColorRef przez UIColor

• RCTAppDelegate wymaga teraz użycia RCTDependencyProvider do ładowania zależności stron trzecich

• CocoaPods ustawia wersję C++ dla wszystkich zależności stron trzecich, aby uniknąć problemów z kompilacją.

React 19?

React 19 was released the 6th of December 2024. At the time, we already cut the branch for React Native 0.77 and we already released three RCs for React Native 0.77. It was too late in the release of React Native 0.77 to introduce React 19 in this release.

React 19 will be shipped in React Native 0.78, and we already cut the branch for this version. You can try it by creating a new app with the command:

npx @react-native-community/cli init YourReact19App --version 0.78.0-rc.0

Podziękowania

React Native 0.77 zawiera ponad 1061 commitów od 161 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:

• Jakub Piasecki za wkład w funkcję display: contents

• Nick Gerleman, Joe Vilches i Jorge Cabiedes Acosta za wydanie nowych funkcji stylistycznych

• Alan Lee za treść dotyczącą wsparcia dla stron 16KB w Androidzie

• Riccardo Cipolleschi i Oskar Kwaśniewski za wsparcie migracji szablonu na Swift

• Nicola Corti za treść o cyklu wycofania react-native init

• Alex Hunt za treść o usunięciu console.log z Metro

Aktualizacja do wersji 0.77

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.77 będzie obsługiwany w Expo SDK 52 (instrukcje jak zaktualizować React Native w swoim projekcie Expo do wersji 0.77.0 pojawią się w osobnym wpisie na blogu Expo w najbliższym czasie).

informacja

0.77 to obecnie najnowsza stabilna wersja React Native, a 0.74.x przestaje być wspierana. Więcej informacji znajdziesz w polityce wsparcia React Native. Planujemy opublikować ostatnią aktualizację kończącą cykl życia wersji 0.74 w najbliższym czasie.