React Native 0.73 - Ulepszenia debugowania, stabilne wsparcie dla dowiązań symbolicznych 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 →

Dziś wydajemy React Native 0.73! Ta wersja wprowadza ulepszenia w debugowaniu z Hermesem, stabilne wsparcie dla dowiązań symbolicznych, wsparcie dla Android 14 i nowe funkcje eksperymentalne. Ogłaszamy także przestarzałość starszych funkcji debugowania oraz wydajemy kolejny filar Nowej Architektury: Tryb bez mostka (Bridgeless Mode)!

Najważniejsze zmiany

• Ulepszenia debugowania

• Stabilne wsparcie dla dowiązań symbolicznych w Metro

• Szablon Kotlina na Androidzie

• Wsparcie dla Android 14

• Aktualizacje Nowej Architektury

• Przestarzałe funkcje debugowania

Zmiany łamiące kompatybilność

• Zmiana nazw pakietów Babel

• Inne zmiany łamiące kompatybilność

• Zmiany w React Native CLI

• Przestarzałe @types/react-native

Najważniejsze zmiany

Ulepszenia debugowania

Zespoły React Native i Hermes są zaangażowane w poprawę doświadczeń związanych z debugowaniem w React Native. W wersji 0.73 z przyjemnością dzielimy się pierwszymi postępami wynikającymi z tych ciągłych inwestycji.

Historia konsoli w Hermesie

console.log() to popularny sposób, w jaki programiści szybko debugują swój kod JavaScript. W poprzednich wersjach logi konsoli w aplikacjach React Native nie były zapisywane, dopóki nie podłączono debugera. To utrudniało obserwację logów występujących na wczesnym etapie ładowania aplikacji.

W React Native 0.73 rozwiązaliśmy ten problem. Hermes przechwytuje teraz wszystkie wywołania console.log() w tle, które zostaną wysłane do zakładki Konsola przy pierwszym podłączeniu debugera — co odpowiada doświadczeniom z debugowania w przeglądarkach internetowych. To nowe zachowanie działa w Flipperze, Chrome DevTools podłączonym do Hermesa oraz eksperymentalnym Nowym Debugerze.

Zaktualizowana dokumentacja debugowania

Odświeżyliśmy sekcję Debugowanie naszej dokumentacji, która teraz zawiera aktualne informacje o podłączaniu wszystkich obsługiwanych debugerów, więcej informacji o React DevTools oraz odświeżone wizualizacje.

Eksperymentalny Nowy Debuger

Zespół React Native pracuje nad nowym środowiskiem debugowania JavaScript, które ma zastąpić Flippera. Wersja poglądowa techniczna jest dostępna od React Native 0.73. Nowy debugger uruchamia się natychmiast i oferuje uproszczony interfejs Chrome DevTools dostosowany do debugowania React Native z Hermesem.

uwaga

Nowy debugger jest eksperymentalny i ma kilka znanych problemów, nad którymi aktywnie pracujemy w kolejnych wydaniach React Native. Jeśli go testujesz, zgłoś swoje uwagi w tym samym wątku dyskusyjnym.

Więcej o włączaniu tej funkcji znajdziesz w dokumentacji.

Stabilne wsparcie dla dowiązań symbolicznych w Metro

Obsługa dowiązań symbolicznych w Metro jest teraz domyślnie włączona. Ta funkcja umożliwia współpracę React Native z konfiguracjami monorepo, gdy katalogi są skonfigurowane z użyciem watchFolders.

Dowiązania symboliczne są głęboko zintegrowane z wewnętrznymi mechanizmami Metro, co oznacza, że działają z funkcjami takimi jak Szybkie Odświeżanie i nie powodują znaczącego spadku wydajności podczas budowania pakietów. Są obsługiwane na wszystkich platformach desktopowych, zarówno z Watchmanem, jak i bez.

informacja

Obejścia dla monorepo

Wiemy, że nadal istnieją problemy brzegowe przy używaniu React Native w strukturze monorepo. Planujemy prace nad ich rozwiązaniem, które nie zdążyły trafić do wersji 0.73, ale które zamierzamy wydać tak szybko, jak to możliwe.

Dla projektów opartych na szablonie React Native (npx react-native init) musisz skonfigurować watchFolders dla katalogów znajdujących się poza głównym folderem projektu, aby Metro mógł je wykryć (więcej informacji). Może być również konieczna aktualizacja ścieżek plików, jeśli zależność react-native jest zainstalowana w folderze na innym poziomie.

Dla aplikacji Expo obsługa Yarn (Classic) workspaces jest domyślnie skonfigurowana. Zobacz też przewodnik Praca z monorepo w dokumentacji Expo.

Szablon Kotlina na Androida

Z przyjemnością ogłaszamy, że od wersji 0.73 Kotlin jest rekomendowanym językiem dla aplikacji Androidowych budowanych w React Native. Podąża to za trendem ekosystemu Androida z ostatnich lat i pozwala tworzyć aplikacje przy użyciu nowoczesnego języka.

Zaktualizowaliśmy szablon React Native na Androida tak, aby używał Kotlina zamiast Javy. Nowe pliki MainActivity.kt i MainApplication.kt są o 36% mniejsze.

The Upgrade Helper has also been updated to make it easier to migrate your .java files to .kt files. If you've previously modified the Java files in your project and you need support migrating them to Kotlin, you can use the Code > Convert Java file to Kotlin File utility of Android Studio (also accessible with the shortcut Cmd ⌘ + Shift ⇧ + Option ⌥ + K).

Obsługa Androida 14

Zaktualizowaliśmy React Native, aby w pełni obsługiwał Androida 14. Od wersji 0.73 deweloperzy mogą teraz targetować najnowszą wersję SDK Androida, poziom API 34 (Upside Down Cake).

Java 17 i aktualizacja Android Gradle Plugin

Aby obsłużyć Androida 14, zaktualizowaliśmy wersję Android Gradle Plugin (AGP) używaną do budowania aplikacji z 7.4.x do 8.1.x.

Ta aktualizacja głównej wersji AGP wiąże się z kilkoma zmianami łamiącymi kompatybilność, opisanymi w notatkach wydawniczych Google (8.0.0 i 8.1.0).

Najważniejsze jest to, że Java 17 stała się teraz wymagana do budowania aplikacji na Androida. Możesz zaktualizować swoją wersję Javy do 17, wykonując polecenie:

brew install --cask zulu@17

oraz aktualizując zmienną środowiskową JAVA_HOME zgodnie z instrukcją w przewodniku wprowadzającego.

Jeśli tworzysz biblioteki, Twoje biblioteki powinny działać z React Native 0.73 bez żadnych zmian. Wcześniej w tym roku opublikowaliśmy notatkę wyjaśniającą, co podwyższenie wersji AGP oznacza dla autorów bibliotek.

Przyznawanie częściowego dostępu do zdjęć i filmów

Funkcja Dostępu do wybranych zdjęć pozwala użytkownikom Androida 14 przyznać aplikacjom dostęp do konkretnych elementów z biblioteki multimediów zamiast dostępu do całej kolekcji. W wersji 0.73 aplikacje React Native obsługują tę możliwość dzięki wykorzystaniu uprawnienia READ_MEDIA_VISUAL_USER_SELECTED w API PermissionsAndroid.

Podwyższenie minimalnego SDK

React Native 0.73 będzie ostatnią wersją wspierającą Androida 5.0 (poziom API 21). Kolejna wersja React Native będzie wymagać minimalnego SDK w wersji 23 (Android 6.0). Więcej o nadchodzących zmianach minimalnego SDK przeczytasz tutaj.

Aktualizacje Nowej Architektury

Kontynuujemy wdrażanie Nowej Architektury React Native, aby udostępnić ją całej społeczności Open Source.

Od wersji React Native 0.68 zarówno Nowy Renderer (Fabric), jak i Nowy System Modułów Natywnych (TurboModules) były dostępne dla użytkowników do testowania i oceny. Dziękujemy społeczności za dotychczasowe opinie.

Dziś publikujemy kolejny element Nowej Architektury: Tryb bez mostka (Bridgeless Mode). Dotychczas po włączeniu Nowej Architektury w aplikacji mostek (Bridge) pozostawał dostępny dla kompatybilności wstecznej ze starszymi komponentami i modułami. Naszą wizją jest jednak całkowite wycofanie mostka. Od React Native 0.73 możesz włączyć tryb bez mostka, który całkowicie wyłączy jego tworzenie.

Razem z trybem bez mostka dostarczamy Warstwę Interoperacyjności Modułów Natywnych, umożliwiającą ponowne wykorzystanie starych modułów. Warstwa Interoperacyjności Renderera wprowadzona w React Native 0.72 została również przystosowana do pracy w trybie bez mostka.

Podobnie jak reszta Nowej Architektury, tryb bez mostka jest obecnie eksperymentalny. Zachęcamy zainteresowanych użytkowników do włączania go i zgłaszania problemów w grupie roboczej Nowej Architektury.

Przestarzałe funkcje debugowania

Integracja Flipper ↔ React Native

Stopniowo odchodzimy od Flippera jako domyślnego narzędzia do debugowania aplikacji React Native. W wersji 0.73 rozpoczynamy to proces, oznaczając jako przestarzałą natywną integrację Flippera w React Native (kod inicjujący podłączający główne wtyczki Flippera). Usuniemy tę integrację i zależność w kolejnej wersji — co oznacza, że elementy Flippera takie jak wtyczka sieciowa przestaną działać.

Bez zmian: Flipper jako samodzielne narzędzie do debugowania aplikacji natywnych pozostanie dostępny. Nawet po jego usunięciu z nowych projektów React Native w przyszłości, programiści będą mogli ręcznie dodać Flippera do swojej aplikacji.

Więcej informacji o powodach odchodzenia od Flippera znajdziesz w dokumencie RFC.

Zdalne debugowanie JavaScript

Zdalne debugowanie JavaScript to przestarzały tryb debugowania, który łączy zewnętrzną przeglądarkę (Chrome) z Twoją aplikacją i uruchamia kod JavaScript na stronie internetowej (np. http://localhost:8081/debugger-ui). Ten model mógł powodować niespójne zachowanie aplikacji podczas debugowania i jest niezgodny z modułami natywnymi w Nowej Architekturze.

W wersji 0.73 zdalne debugowanie JavaScript zostało oznaczone jako przestarzałe i usunięte z menu deweloperskiego. Aktywacja zdalnego debugera wymaga teraz ręcznej konfiguracji poprzez API NativeDevSettings. Instrukcje znajdziesz w dokumentacji Innych metod debugowania.

informacja

Zdalne debugowanie JavaScript było wcześniej domyślnym rozwiązaniem dla aplikacji używających JavaScriptCore (JSC). Dla aplikacji iOS zalecamy użycie narzędzi deweloperskich Safari (bezpośrednie debugowanie JSC).

Dla spójnego środowiska debugowania na wszystkich platformach zalecamy Hermesa.

Zmiany łamiące kompatybilność

Zmiana nazw pakietów Babel

Przenieśliśmy dwa pakiety związane z Babelem z Metro do repozytorium React Native i zmieniliśmy ich schemat wersjonowania, co upraszcza utrzymanie i aktualizacje. Nowe wersje tych pakietów obsługują funkcje Nowej Architektury w 0.73, co oznacza konieczność ich aktualizacji.

Podczas aktualizacji skorzystaj z Upgrade Helper, aby upewnić się, że zaktualizowałeś te zależności. Niektóre pakiety zmieniły nazwy:

Old Package Name	New Package Name
metro-react-native-babel-preset	@react-native/babel-preset
metro-react-native-babel-transformer	@react-native/metro-babel-transformer

informacja

@react-native/babel-preset zawiera teraz @react-native/babel-plugin-codegen, więc nie trzeba już go osobno dodawać w konfiguracji Babela.

Inne zmiany łamiące kompatybilność

To niektóre kluczowe zmiany łamiące kompatybilność w wersji 0.73. Pełną listę znajdziesz w dzienniku zmian.

• Minimalna wymagana wersja Node.js podniesiona do 18.x (#37709) (zobacz też koniec wsparcia Node.js 16).

• Szablon projektu używa teraz TypeScript 5.0 (#36862).

  • Typy React Native działają nadal z TypeScript 4.8.

• Android: Java 17 jest teraz wymagana do budowania aplikacji Android (patrz wyżej).

• Android: Aktualizacja Fresco do wersji 3.0 (#38275).

• iOS: Minimalna wersja iOS podniesiona do 13.4 (#36795).

• iOS: Metro nie będzie już automatycznie uruchamiany przy budowaniu przez Xcode (#38242).

Dla autorów bibliotek:

• Android: Aktualizacja do AGP 8.1.1 (dyskusja)

Zmiany w React Native CLI

Ważne zmiany łamiące kompatybilność

• Zmiana domyślnego prefiksu zadań w komendzie build-android. Od teraz uruchomienie build-android wykonuje zadanie bundle zamiast assemble (#1913).

• Usunięto rezerwowy przepływ dla domyślnych konfiguracji Metro (#1972).

  • Zaktualizowany format metro.config.js wprowadzony w wersji 0.72 jest teraz wymagany w 0.73, ponieważ usunęliśmy rezerwową kopię tych ustawień z CLI.

• Usunięto opcję --configuration z run-ios (zastąpiona przez --mode) (#2028).

• Usunięto opcję --variant z komendy build-android (zastąpiona przez --mode) (#2026).

Pełna lista zmian dla wersji 12.0.0.

Przestarzałe @types/react-native

Jak wspomniano w Wsparcie TypeScript jako podstawowe, od wersji 0.71 dostarczamy typy TypeScript z pakietem react-native, a w 0.73 oznaczamy @types/react-native jako przestarzałe.

Nie będziemy wydawać żadnych poprawek dla istniejących wersji. Zalecamy migrację z @types/react-native. Instrukcje znajdziesz w sekcji jak migrować.

Podziękowania

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

Aktualizacja do wersji 0.73

Użyj React Native Upgrade Helper, aby zobaczyć zmiany kodu między wersjami React Native dla istniejących projektów, oraz zapoznaj się z dokumentacją aktualizacji. Możesz też utworzyć nowy projekt komendą npx react-native@latest init MyProject.

Jeśli używasz Expo, React Native 0.73 będzie obsługiwany w wydaniu Expo SDK 50.

informacja

0.73 jest teraz najnowszą stabilną wersją React Native, a wersja 0.70.x przechodzi do stanu nieobsługiwanego. Więcej informacji w polityce wsparcia React Native.