Dziś wydajemy React Native 0.64, który zawiera obsługę Hermes na iOS.

Hermes jako opcja na iOS​

Hermes to otwartoźródłowy silnik JavaScript zoptymalizowany pod React Native. Poprawia wydajność poprzez zmniejszenie zużycia pamięci, redukcję rozmiaru pobieranych plików oraz skrócenie czasu do interaktywności (TTI).

Z przyjemnością ogłaszamy, że w tej wersji możesz używać Hermes również na iOS. Aby go włączyć, ustaw hermes_enabled na true w swoim Podfile i wykonaj pod install.

use_react_native!(
   :path => config[:reactNativePath],
   # to enable hermes on iOS, change `false` to `true` and then install pods
   :hermes_enabled => true
)

Pamiętaj, że obsługa Hermes na iOS jest wczesnym etapie rozwoju. Udostępniamy ją jako opcję, ponieważ wciąż prowadzimy testy wydajnościowe. Zachęcamy do przetestowania w swoich aplikacjach i podzielenia się doświadczeniami!

Inline Requires domyślnie włączone​

Inline Requires to opcja konfiguracyjna Metro, która przyspiesza uruchamianie aplikacji przez opóźnianie wykonania modułów JavaScript aż do momentu ich użycia.

Ta funkcja istniała od lat jako opcjonalna konfiguracja, wymieniona w dokumentacji dotyczącej wydajności. Teraz włączamy ją domyślnie w nowych aplikacjach, aby umożliwić tworzenie szybkich aplikacji bez dodatkowej konfiguracji.

Inline Requires to transformacja Babel, która przenosi importy modułów w miejsce ich użycia. Przykładowo, zamienia import na początku pliku na import w miejscu wykorzystania.

Przed:

import {MyFunction} from 'my-module';

const MyComponent = props => {
  const result = MyFunction();

  return <Text>{result}</Text>;
};

Po:

const MyComponent = props => {
  const result = require('my-module').MyFunction();

  return <Text>{result}</Text>;
};

Więcej informacji o Inline Requires znajdziesz w dokumentacji wydajności.

Śledzenie Hermes w Chrome​

W zeszłym roku Facebook sponsorował stypendium Major League Hacking, wspierając rozwój React Native. Jessie Nguyen i Saphal Patro dodali możliwość wizualizacji działania aplikacji w zakładce Performance Chrome DevTools podczas korzystania z Hermes.

Szczegóły znajdziesz na nowej stronie dokumentacji.

Hermes z obsługą Proxy​

Dodaliśmy obsługę Proxy w Hermes, co umożliwia kompatybilność z popularnymi projektami jak react-native-firebase i mobx. Jeśli ich używasz, możesz teraz migrować do Hermes.

Planujemy ustawienie Hermes jako domyślnego silnika JavaScript w nadchodzących wydaniach, dlatego usuwamy przeszkody w jego adopcji. Problemy zgłaszaj w repozytorium Hermes na GitHubie.

React 17​

React 17 nie wprowadza nowych funkcji ani istotnych zmian. Dla React Native kluczowa jest nowa transformacja JSX, która eliminuje konieczność importowania Reacta w plikach używających JSX.

Więcej o React 17 przeczytasz na blogu Reacta.

Zmiany w wersjach zależności​

• Usunięto wsparcie dla Android API 16-20. Aplikacja Facebooka konsekwentnie wycofuje wsparcie dla mało używanych wersji Androida. Jako że Facebook nie wspiera już tych wersji i stanowi główne środowisko testowe React Native, React Native również wycofuje wsparcie.

• Xcode 12 i CocoaPods 1.10 są wymagane

• Minimalna obsługiwana wersja Node została podniesiona z 10 do 12

• Flipper zaktualizowany do wersji 0.75.1

Podziękowania​

Dziękujemy setkom współtwórców, którzy pomogli w stworzeniu wersji 0.64! Log zmian 0.64 zawiera wszystkie modyfikacje wprowadzone w tym wydaniu.

Witaj społeczności React Native!​

W maju 2020 roku Facebook jako pierwsza firma przyjął zobowiązanie GAAD, deklarując tym samym, że uczyni dostępność kluczową częścią projektu open source React Native. Od tego czasu Facebook dokładnie przeanalizował i udokumentował luki w dostępności w React Native. Dotychczasowa analiza wykazała 90 problemów, z których wszystkie zostały zgłoszone jako zgłoszenia na GitHubie.

Ogólnie stwierdziliśmy, że interfejsy API React Native zapewniają solidne wsparcie dla dostępności. Jednakże odkryliśmy również, że wiele podstawowych komponentów nie w pełni wykorzystuje natywne API dostępności platform, a także brakuje wsparcia dla niektórych funkcji specyficznych dla platform.

Entuzjazm i różnorodność współtwórców zawsze odgrywały kluczową rolę w rozwoju React Native, a te luki w dostępności stanowią doskonałą okazję dla obecnych i nowych współtwórców. Jeśli interesujesz się współtworzeniem React Native, zachęcamy do przyłączenia się do nas w działaniach na rzecz poprawy dostępności.

Aby docenić wkład współtwórców, po zamknięciu zgłoszenia dotyczącego dostępności i połączeniu go z pull requestem, nasz menedżer społecznościowy wyróżni taką osobę na Twitterze. Współtwórcy, których pull requesty zostaną zaakceptowane, zostaną wyróżnieni w comiesięcznych aktualizacjach na blogu React Native.

Dołącz do nas w tworzeniu React Native dostępnego dla wszystkich.

Jak możesz pomóc:​

• Nowi współtwórcy powinni przeczytać przewodnik dla współtwórców i przejrzeć listę 46 zgłoszeń dla początkujących w repozytorium React Native na GitHubie.

• Osoby zainteresowane zgłoszeniami wymagającymi większego zaangażowania powinny odwiedzić stronę projektu Poprawa dostępności w React Native i zapoznać się ze zgłoszeniami wymagającymi wiedzy o React Native.

• Redaktorzy techniczni zainteresowani aktualizacją dokumentacji React Native, aby odzwierciedlić likwidowane luki w dostępności, powinni odwiedzić dokumentację React Native.

• Podziel się tą inicjatywą z każdym, kto może pomóc!

• Śledź menedżera społeczności ds. dostępności open source GAAD Pledge dla React Native na Twitterze lub Facebooku, aby być na bieżąco z postępami.

W zeszłym roku przeprowadziliśmy wywiady z użytkownikami i rozesłaliśmy ankietę, aby dowiedzieć się więcej o tym, jak i kiedy ludzie korzystają z dokumentacji React Native. Dzięki danym i wskazówkom zebranym z 24 wywiadów oraz ponad 3000 odpowiedzi na ankietę, mogliśmy pracować nad ulepszeniem dokumentacji React Native i z radością dzielimy się dzisiaj postępami:

• Nowe przewodniki dla początkujących Wprowadziliśmy nowe przewodniki rozpoczynające przygodę z dokumentacją, które wyjaśniają, czym są komponenty natywne osobom bez doświadczenia w rozwoju aplikacji mobilnych. Dodaliśmy także powtórkę/wprowadzenie do React, aby pomóc osobom stawiającym pierwsze kroki z Reactem!

• Nowy przewodnik testowania Współpracowaliśmy z Vojtěchem Novákiem, aby stworzyć nowy ilustrowany przewodnik testowania, który wprowadza programistów aplikacji w różne strategie testowania i ich działanie w przepływie pracy React Native.

• Nowy przewodnik bezpieczeństwa Współpracowaliśmy z Kadi Kraman, aby stworzyć nowy ilustrowany przewodnik bezpieczeństwa, który wyjaśnia podstawy bezpieczeństwa w świecie React Native i przedstawia najlepsze rozwiązania.

• Więcej ilustracji Dodaliśmy nowe, efektowne ilustracje, w tym do nowej dokumentacji komponentu Pressable oraz wprowadzenia do komponentów React Native

• https://reactnative.dev Po 5 latach wreszcie przenieśliśmy się na własną domenę! reactnative.dev jest łatwiejsze do uzupełnienia w pasku przeglądarki i łatwiejsze do wpisania niż nasz poprzedni adres github.io!

• Ulepszenia architektury i projektu strony Zaktualizowaliśmy projekt i architekturę witryny, aby lepiej wyeksponować i skategoryzować nasze przewodniki oraz zwiększyć czytelność treści w dokumentacji API. Szczególne uznanie dla Bartosza Kaszubowskiego, którego dbałość o szczegóły i współpraca umożliwiły szybkie wprowadzenie wielu z tych zmian!

• Zaktualizowana dokumentacja komponentów podstawowych i API Zorganizowaliśmy akcję aktualizacji dokumentacji! Dzięki tym i innym uczestnikom udało nam się w pełni zaktualizować dokumentację i dodać przykłady Snack do wszystkich części na czas wydania wersji 0.62: Marta Dąbrowska, Abraham Nnaji, Ahmed Talaat El-Hager, Mohamed Abdel Nasser Abdou, Danilo Britto, Mitul Savani, Kaio Duarte, Pablo Espinosa, Jesse Katsumata, I Gede Agastya Darma Laksana, Sebastião Bruno Kiafuka Fernando, Miguel Bolivar, Dani Akash, Luiz Celso de Faria Alves oraz Bartosz Kaszubowski. Dzięki ich wkładowi, to najlepsza i najbardziej aktualna dokumentacja React Native!

• Przesyłajcie dalej PR-y! Udało nam się utrzymać liczbę otwartych pull requestów stale poniżej 10 tygodniowo! Dziękujemy za ich przesyłanie!

Wielkie dzięki dla wszystkich, którzy wzięli udział w wywiadach, ankiecie i naszych pracach nad dokumentacją! Wasza współpraca to umożliwia.

Zespół React Native w Facebooku kieruje się zasadami, które pomagają nam ustalać priorytety w rozwoju frameworka. Zasady te odzwierciedlają specyfikę naszego zespołu i niekoniecznie reprezentują wszystkich uczestników ekosystemu React Native. Udostępniamy je, by zwiększyć transparentność naszych motywacji, procesów decyzyjnych i kierunków rozwoju.

Natywne Doświadczenie​

Naszym najwyższym priorytetem w React Native jest spełnienie oczekiwań użytkowników wobec każdej platformy. Dlatego React Native renderuje natywne komponenty platformy. Przedkładamy natywny wygląd i zachowanie nad spójność międzyplatformową.

Przykładowo, komponent TextInput w React Native renderuje się jako UITextField na iOS. Dzięki temu integracja z menedżerami haseł i sterowaniem klawiaturą działa od ręki. Używając natywnych komponentów, aplikacje React Native automatycznie dostosowują się do zmian w designie i zachowaniu w nowych wersjach Androida i iOS.

Aby dorównać natywnym aplikacjom, musimy też zapewnić im równą wydajność. To właśnie tutaj skupiamy nasze najbardziej ambitne wysiłki. Przykładowo, Facebook stworzył Hermes - nowy silnik JavaScript od podstaw dla React Native na Androidzie. Hermes znacząco skraca czas uruchamiania aplikacji. Pracujemy też nad głębokimi zmianami architektonicznymi optymalizującymi model wątków i ułatwiającymi integrację z natywnym kodem.

Skala Przemysłowa​

Setki ekranów w aplikacji Facebooka wykorzystuje React Native. Aplikację tę używa miliardy osób na ogromnej gamie urządzeń. Dlatego inwestujemy w rozwiązywanie najbardziej złożonych problemów na wielką skalę.

Wdrażając React Native w naszych aplikacjach, identyfikujemy problemy niewidoczne w mniejszej skali. Przykładowo, Facebook skupia się na optymalizacji wydajności na szerokim spektrum urządzeń – od najnowszych iPhone'ów po starsze generacje Androida. Te priorytety kształtują nasze projekty architektoniczne jak Hermes, Fabric i TurboModules.

Udowodniliśmy, że React Native skaluje się też w ogromnych organizacjach. Gdy setki programistów pracują nad jedną aplikacją, stopniowe wdrażanie jest koniecznością. Dlatego zapewniliśmy możliwość adoptowania React Native ekran po ekranie. Wkrótce idziemy o krok dalej – umożliwimy migrację pojedynczych widoków w istniejących natywnych ekranach.

Skupienie na skali przemysłowej oznacza, że nasz zespół nie zajmuje się wieloma innymi obszarami. Przykładowo, nie prowadzimy aktywnej promocji React Native w branży. Nie tworzymy też rozwiązań dla problemów, których nie obserwujemy w dużej skali. Dzięki licznym partnerom i współtwórcom te ważne dla społeczności obszary są jednak rozwijane.

Prędkość Programowania​

Doskonałe doświadczenia użytkownika tworzy się iteracyjnie. Efekt zmian w kodzie powinien być widoczny w działającej aplikacji w kilka sekund. Architektura React Native zapewnia niemal natychmiastową informację zwrotną podczas rozwoju.

Zespoły często zgłaszają, że adoptowanie React Native znacząco przyspiesza ich pracę. Natychmiastowy podgląd zmian ułatwia eksperymentowanie z koncepcjami i dopracowywanie szczegółów bez przerywania kodowania przy każdej modyfikacji. Wprowadzając zmiany w React Native, dbamy o zachowanie tej jakości doświadczeń deweloperskich.

Natychmiastowy podgląd to nie jedyna zaleta. Zespoły wykorzystują rosnący ekosystem wysokiej jakości pakietów open source. Mogą też współdzielić logikę biznesową między Androidem, iOS i webem. To pomaga szybciej wydawać aktualizacje i redukować bariery między zespołami platformowymi.

Wszystkie Platformy​

Gdy prezentowaliśmy React Native w 2014 roku, towarzyszyło mu motto „Naucz się raz, pisz wszędzie” – i mamy na myśli dosłownie wszędzie. Deweloperzy powinni móc dotrzeć do jak najszerszego grona odbiorców bez ograniczeń modelu urządzenia czy systemu operacyjnego.

React Native obsługuje bardzo różne platformy, w tym mobilne, desktopowe, internetowe, telewizyjne, VR, konsole do gier i inne. Chcemy umożliwić bogate doświadczenia na każdej platformie, zamiast wymagać od developerów budowania pod najmniejszy wspólny mianownik. Aby to osiągnąć, skupiamy się na wspieraniu unikalnych funkcji każdej platformy. Obejmuje to różne mechanizmy wprowadzania danych (np. dotyk, pióro, mysz) aż po fundamentalnie różne doświadczenia użytkownika, takie jak środowiska 3D w VR.

Ta zasada wpłynęła na naszą decyzję o implementacji nowej architektury rdzenia React Native w wieloplatformowym C++ w celu zapewnienia spójności między platformami. Usprawniamy również publiczny interfejs przeznaczony dla innych opiekunów platform, takich jak Microsoft z Windows i macOS. Dążymy do umożliwienia obsługi React Native na dowolnych platformach.

Deklaratywny interfejs użytkownika​

Nie wierzymy w wdrażanie identycznego interfejsu użytkownika na każdej platformie – wierzymy w udostępnianie unikalnych możliwości każdej platformy poprzez ten sam deklaratywny model programowania. Naszym deklaratywnym modelem programowania jest React.

Z naszego doświadczenia wynika, że jednokierunkowy przepływ danych spopularyzowany przez React ułatwia zrozumienie aplikacji. Preferujemy wyrażanie ekranu jako kompozycję deklaratywnych komponentów zamiast imperatywnie zarządzanych widoków. Sukces Reacta w internecie oraz kierunek rozwoju nowych natywnych frameworków Androida i iOS pokazują, że branża również przyjęła deklaratywne UI.

React spopularyzował deklaratywne interfejsy użytkownika. Pozostaje jednak wiele nierozwiązanych problemów, które React jest w wyjątkowej pozycji rozwiązać. React Native będzie nadal budować na innowacjach Reacta i pozostawać na czele ruchu deklaratywnych interfejsów użytkownika.

Dziś wydajemy React Native 0.63 z domyślnie włączonym LogBox.

LogBox​

Często słyszeliśmy od społeczności, że błędy i ostrzeżenia w React Native są trudne do debugowania. Aby rozwiązać te problemy, przejrzeliśmy cały system błędów, ostrzeżeń i logów w React Native i przeprojektowaliśmy go od podstaw.

LogBox to całkowicie przeprojektowane doświadczenie związane z redbox, yellowbox i logowaniem w React Native. W wersji 0.62 wprowadziliśmy LogBox jako opcję do włączenia. W tym wydaniu LogBox staje się domyślnym doświadczeniem w całym React Native.

LogBox rozwiązuje problemy związane z nadmierną szczegółowością, złym formatowaniem lub brakiem możliwości działania na błędach i ostrzeżeniach, skupiając się na trzech głównych celach:

• Zwięzłość: Logi powinny zawierać minimalną ilość informacji niezbędną do debugowania problemu.

• Formatowanie: Logi powinny być sformatowane tak, aby można było szybko znaleźć potrzebne informacje.

• Możliwość działania: Logi powinny umożliwiać podjęcie działań, aby można było naprawić problem i przejść dalej.

Aby osiągnąć te cele, LogBox zawiera:

• Powiadomienia logów: Przeprojektowaliśmy powiadomienia ostrzegawcze i dodaliśmy obsługę błędów, dzięki czemu wszystkie komunikaty console.warn i console.log pojawiają się jako powiadomienia zamiast zasłaniać aplikację.

• Ramki kodu: Każdy błąd i ostrzeżenie zawiera teraz ramkę kodu pokazującą źródłowy kod logu bezpośrednio w aplikacji, co pozwala szybko zidentyfikować źródło problemu.

• Stosy komponentów: Wszystkie stosy komponentów są teraz wydzielone z komunikatów o błędach i umieszczone w osobnej sekcji z widocznymi trzema najważniejszymi klatkami. Daje to spójne miejsce oczekiwania informacji o klatkach stosu bez zaśmiecania komunikatu logu.

• Zwinięte klatki stosu: Domyślnie zwijamy teraz klatki stosu wywołań niezwiązane z kodem aplikacji, aby można było szybko zobaczyć problem w aplikacji bez przeglądania wewnętrznych elementów React Native.

• Formatowanie błędów składni: Ulepszyliśmy formatowanie błędów składni i dodaliśmy ramki kodu z kolorowaniem składni, dzięki czemu można zobaczyć źródło błędu, naprawić go i kontynuować kodowanie bez przeszkód ze strony React Native.

Wszystkie te funkcje zostały opakowane w ulepszony projekt wizualny, spójny dla błędów i ostrzeżeń, umożliwiający przeglądanie wszystkich logów w jednym przyjaznym interfejsie.

W związku z tą zmianą wycofujemy również YellowBox na rzecz API LogBox:

• LogBox.ignoreLogs(): Ta funkcja zastępuje YellowBox.ignoreLogs([]) jako sposób wyciszania logów pasujących do podanych ciągów lub wyrażeń regularnych.

• LogBox.ignoreAllLogs(): Ta funkcja zastępuje console.disableYellowBox jako sposób wyłączania powiadomień o błędach lub ostrzeżeniach. Uwaga: wyłącza tylko powiadomienia, nieprzechwycone błędy nadal otworzą pełnoekranowy LogBox.

W wersji 0.63 będziemy ostrzegać przy użyciu tych przestarzałych modułów lub metod. Prosimy o aktualizację miejsc wywołań tych API przed ich usunięciem w wersji 0.64.

Więcej informacji o LogBox i debugowaniu React Native znajdziesz w dokumentacji tutaj.

Pressable​

React Native został stworzony, aby umożliwić aplikacjom spełnianie oczekiwań użytkowników wobec platformy. Obejmuje to unikanie "sygnatur" – drobnych elementów zdradzających, że aplikacja powstała w React Native. Jednym z głównych źródeł takich sygnatur były komponenty dotykowe: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback i TouchableBounce. Te komponenty sprawiają, że aplikacja jest interaktywna, zapewniając wizualną odpowiedź na działania użytkownika. Jednakże zawierają wbudowane style i efekty niedopasowane do interakcji platformowych, co pozwala użytkownikom rozpoznać aplikacje napisane w React Native.

Co więcej, w miarę rozwoju React Native i wzrostu wymagań co do jakości aplikacji, te komponenty nie ewoluowały. React Native obsługuje już platformy takie jak Web, Desktop i TV, ale brakowało wsparcia dla dodatkowych trybów wprowadzania danych. React Native musi zapewniać wysokiej jakości interakcje na wszystkich platformach.

Aby rozwiązać te problemy, wprowadzamy nowy podstawowy komponent Pressable. Może on wykrywać różne rodzaje interakcji. API zaprojektowano tak, aby zapewniać bezpośredni dostęp do bieżącego stanu interakcji bez konieczności ręcznego zarządzania stanem w komponencie nadrzędnym. Umożliwia też platformom rozszerzenie funkcjonalności o efekty hover, blur, focus i inne. Oczekujemy, że większość osób będzie tworzyć i udostępniać komponenty oparte na Pressable zamiast polegać na domyślnych rozwiązaniach takich jak TouchableOpacity.

import {Pressable, Text} from 'react-native';

<Pressable
  onPress={() => {
    console.log('pressed');
  }}
  style={({pressed}) => ({
    backgroundColor: pressed ? 'lightskyblue' : 'white',
  })}>
  <Text style={styles.text}>Press Me!</Text>
</Pressable>;

A simple example of a Pressable component in action

Więcej informacji znajdziesz w dokumentacji.

Natywne Kolory (PlatformColor, DynamicColorIOS)​

Każda natywna platforma ma koncepcję kolorów systemowych. Kolory te automatycznie dostosowują się do ustawień systemowych takich jak tryb Jasny/Ciemny, ustawień dostępności jak Wysoki Kontrast, a nawet kontekstu w aplikacji takich jak cechy zawierającego widoku lub okna.

Choć niektóre z tych ustawień można wykryć za pomocą API Appearance i/lub AccessibilityInfo i odpowiednio ustawić style, takie rozwiązania są nie tylko kosztowne w implementacji, ale też tylko przybliżają wygląd natywnych kolorów. Te niespójności są szczególnie widoczne w aplikacjach hybrydowych, gdzie elementy React Native współistnieją z natywnymi.

React Native oferuje teraz gotowe rozwiązanie do używania tych kolorów systemowych. PlatformColor() to nowe API, które można używać jak każdego innego koloru w React Native.

Na przykład w iOS system udostępnia kolor labelColor. Można go użyć w React Native z PlatformColor w ten sposób:

import {Text, PlatformColor} from 'react-native';

<Text style={{color: PlatformColor('labelColor')}}>
  This is a label
</Text>;

Sets the color of the Text component to labelColor as defined by iOS.

Z kolei Android udostępnia kolory jak colorButtonNormal. Ten kolor użyjemy w React Native jako:

import {View, Text, PlatformColor} from 'react-native';

<View
  style={{
    backgroundColor: PlatformColor('?attr/colorButtonNormal'),
  }}>
  <Text>This is colored like a button!</Text>
</View>;

Sets the background color of the View component to colorButtonNormal as defined by Android.

Więcej o PlatformColor przeczytasz w dokumentacji. Możesz też zobaczyć przykłady kodu w RNTester.

DynamicColorIOS to API dostępne tylko na iOS, pozwalające definiować kolory dla trybów jasnego i ciemnego. Podobnie jak PlatformColor, można go używać wszędzie tam, gdzie stosuje się kolory. DynamicColorIOS wykorzystuje pod spodem iOS-owe colorWithDynamicProvider.

import {Text, DynamicColorIOS} from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});

<Text style={{color: customDynamicTextColor}}>
  This color changes automatically based on the system theme!
</Text>;

Changes the text color based on the system theme

Więcej o DynamicColorIOS znajdziesz w dokumentacji.

Zakończenie wsparcia dla iOS 9 i Node.js 8​

Po ponad czterech latach od premiery kończymy wsparcie dla iOS 9. Ta zmiana pozwoli nam działać szybciej, redukując liczbę kontroli kompatybilności w kodzie natywnym sprawdzających wsparcie funkcji w danej wersji iOS. Przy udziale rynkowym wynoszącym 1% nie powinno to znacząco wpłynąć na użytkowników.

Jednocześnie wycofujemy wsparcie dla Node 8. Jego cykl wsparcia LTS wygasł w grudniu 2019. Obecną wersją LTS jest Node 10 i to właśnie ją teraz obsługujemy. Jeśli nadal używasz Node 8 do tworzenia aplikacji React Native, zachęcamy do aktualizacji, aby otrzymywać wszystkie najnowsze poprawki bezpieczeństwa i aktualizacje.

Inne znaczące ulepszenia​

• Obsługa renderowania <View /> w <Text /> bez określania rozmiaru: Teraz możesz renderować dowolny <View /> wewnątrz komponentu <Text /> bez jawnego ustawiania szerokości i wysokości, co nie zawsze było możliwe. We wcześniejszych wersjach React Native powodowało to pojawienie się RedBox.

• Zmiana LaunchScreen w iOS z xib na storyboard: Od 30 kwietnia 2020 wszystkie aplikacje przesyłane do App Store muszą używać storyboarda z Xcode do ekranu startowego, a aplikacje na iPhone'a muszą obsługiwać wszystkie rozmiary ekranów. Ta zmiana dostosowuje domyślny szablon React Native do tych wymagań.

Podziękowania​

Dziękujemy setkom współtwórców, którzy pomogli w stworzeniu wersji 0.63!

Pełną listę zmian znajdziesz w dzienniku zmian wersji 0.63.

Dziś wydajemy React Native w wersji 0.62, która domyślnie zawiera obsługę Flippera.

To wydanie następuje w trakcie globalnej pandemii. Publikujemy tę wersję dziś, aby docenić pracę setek współtwórców, którzy umożliwili to wydanie, i zapobiec zbytniemu odsunięciu się od gałęzi głównej. Prosimy o wyrozumiałość dla ograniczonej dostępności współtwórców do pomocy przy problemach i rozważenie przełożenia aktualizacji, jeśli to konieczne.

Flipper domyślnie​

Flipper to narzędzie dla deweloperów do debugowania aplikacji mobilnych. Cieszy się popularnością w społecznościach Androida i iOS, a w tym wydaniu domyślnie włączyliśmy jego obsługę dla nowych i istniejących aplikacji React Native.

Flipper oferuje następujące funkcje od ręki:

• Metro Actions: Przeładuj aplikację i wywołaj menu deweloperskie bezpośrednio z paska narzędzi.

• Crash Reporter: Przeglądaj raporty o awariach z urządzeń Android i iOS.

• React DevTools: Korzystaj z najnowszej wersji React DevTools obok innych narzędzi.

• Network Inspector: Przeglądaj wszystkie żądania sieciowe wysyłane przez aplikacje na urządzeniu.

• Metro and Device Logs: Przeglądaj, wyszukuj i filtruj logi z Metro oraz urządzenia.

• Native Layout Inspector: Przeglądaj i edytuj natywny układ generowany przez renderer React Native.

• Database and Preference Inspectors: Przeglądaj i edytuj bazy danych oraz preferencje urządzenia.

Dodatkowo, ponieważ Flipper to rozszerzalna platforma, zapewnia marketplace pobierający wtyczki z NPM, co umożliwia publikowanie i instalację niestandardowych wtyczek dopasowanych do Twoich workflow. Zobacz dostępne wtyczki tutaj.

Więcej informacji znajdziesz w dokumentacji Flippera.

Nowe funkcje trybu ciemnego​

Dodaliśmy nowy moduł Appearance zapewniający dostęp do preferencji wyglądu użytkownika, takich jak preferowany schemat kolorów (jasny lub ciemny).

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

Dodaliśmy także hook do subskrybowania aktualizacji stanu preferencji użytkownika:

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};

Więcej informacji znajdziesz w dokumentacji Appearance i useColorScheme.

Przeniesienie Apple TV do react-native-tvos​

W ramach naszej inicjatywy Lean Core i aby dostosować Apple TV do innych platform takich jak React Native Windows i React Native macOS, zaczęliśmy usuwać kod specyficzny dla Apple TV z rdzenia.

Od teraz obsługa Apple TV w React Native będzie utrzymywana w repozytorium react-native-community/react-native-tvos wraz z odpowiadającym pakietem NPM react-native-tvos. To pełny fork głównego repozytorium zawierający wyłącznie zmiany potrzebne do obsługi Apple TV.

Wydania react-native-tvos będą oparte na publicznych wydaniach React Native. Dla wydania 0.62 react-native prosimy o aktualizację projektów Apple TV do wersji react-native-tvos 0.62.

Większe wsparcie przy aktualizacji​

Gdy wydano wersję 0.61, społeczność wprowadziła nowe narzędzie Upgrade Helper wspierające programistów w aktualizowaniu React Native. Upgrade Helper pokazuje różnice między twoją obecną wersją a docelową, co pozwala zobaczyć zmiany potrzebne do przeprowadzenia aktualizacji.

Nawet z tym narzędziem podczas aktualizacji mogą pojawić się problemy. Dlatego dziś wprowadzamy dedykowane wsparcie ogłaszając Upgrade-Support. To tracker GitHub, gdzie użytkownicy mogą zgłaszać problemy związane z aktualizacją projektów, aby otrzymać pomoc od społeczności.

Stale pracujemy nad poprawą procesu aktualizacji i mamy nadzieję, że te narzędzia zapewnią użytkownikom wsparcie w nietypowych przypadkach, których jeszcze nie przewidzieliśmy.

Inne ulepszenia​

• LogBox: Nowe środowisko błędów i ostrzeżeń w LogBox dodajemy jako opcję do włączenia; by je aktywować, dodaj require('react-native').unstable_enableLogBox() do pliku index.js.

• React DevTools v4: Ta zmiana obejmuje aktualizację do najnowszych React DevTools, które oferują znaczną poprawę wydajności, lepszą nawigację i pełne wsparcie dla React Hooks.

• Ulepszenia dostępności: Wprowadziliśmy poprawki w dostępności, w tym dodanie accessibilityValue, brakujących właściwości w Touchables, onSlidingComplete zdarzeń dostępności oraz zmianę domyślnej roli komponentu Switch z "button" na "switch".

Zmiany łamiące kompatybilność​

• Usunięcie PropTypes: Usuwamy propTypes z podstawowych komponentów, aby zmniejszyć wpływ React Native core na rozmiar aplikacji i promować statyczne systemy typów sprawdzane podczas kompilacji zamiast w czasie wykonania.

• Usunięcie accessibilityStates: Usunęliśmy przestarzałą właściwość accessibilityStates na rzecz nowej właściwości accessibilityState, która semantycznie bogatszym sposobem przekazywania informacji o stanie komponentu do usług dostępności.

• Zmiany w TextInput: Usunęliśmy onTextInput z TextInput, ponieważ jest rzadko używane, niezgodne ze standardem W3C i trudne do implementacji w Fabric. Usunęliśmy także nieudokumentowaną właściwość inputView oraz selectionState.

Przestarzałe funkcje​

• AccessibilityInfo.fetch było już przestarzałe, ale w tej wersji dodaliśmy ostrzeżenie.

• Ustawienie useNativeDriver jest teraz wymagane, aby umożliwić zmianę domyślnej wartości w przyszłości.

• Referencja (ref) komponentu Animated jest teraz jego wewnętrznym komponentem, a getNode zostało oznaczone jako przestarzałe.

Podziękowania​

Dziękujemy setkom współtwórców, którzy pomogli stworzyć wersję 0.62!

Aby zobaczyć wszystkie aktualizacje, zajrzyj do changeloga dla wersji 0.62.

Po ponad 20 pull requestach od 6 współtwórców ze Społeczności React Native z dumą prezentujemy react-native doctor - nowe polecenie, które pomoże Ci w rozpoczęciu pracy, rozwiązywaniu problemów i automatycznym naprawianiu błędów w środowisku deweloperskim. Polecenie doctor jest wzorowane na własnych poleceniach doctor z Expo i Homebrew, z odrobiną inspiracji interfejsem użytkownika zaczerpniętą z Jest.

Z radością ogłaszamy wydanie React Native 0.61, które wprowadza nowe podejście do przeładowywania aplikacji - funkcję Fast Refresh.

Fast Refresh​

Gdy zapytaliśmy społeczność React Native o najczęstsze problemy, jedną z głównych odpowiedzi była niesprawność funkcji „hot reloading”. Nie działała niezawodnie dla komponentów funkcyjnych, często nie aktualizowała ekranu i nie radziła sobie z literówkami czy błędami. Dowiedzieliśmy się, że większość osób ją wyłączała z powodu jej niestabilności.

W React Native 0.61 łączymy istniejące funkcje „live reloading” (przeładowanie po zapisie) i „hot reloading” w jedną nową funkcję o nazwie „Fast Refresh”. Fast Refresh został zbudowany od zera z uwzględnieniem następujących zasad:

• Fast Refresh w pełni obsługuje nowoczesny React, w tym komponenty funkcyjne i Hooks.

• Fast Refresh elegancko radzi sobie z literówkami i innymi błędami, przełączając się w razie potrzeby na pełne przeładowanie.

• Fast Refresh nie wykonuje inwazyjnych transformacji kodu, dzięki czemu jest na tyle niezawodny, że może być domyślnie włączony.

Aby zobaczyć Fast Refresh w akcji, obejrzyj to wideo:

Wypróbuj i daj nam znać, co sądzisz! Jeśli wolisz, możesz wyłączyć tę funkcję w menu deweloperskim (Cmd+D na iOS, Cmd+M lub Ctrl+M na Androidzie). Przełączanie jest natychmiastowe, więc możesz to zrobić w dowolnym momencie.

Oto kilka wskazówek dotyczących Fast Refresh:

• Domyślnie Fast Refresh zachowuje lokalny stan Reacta w komponentach funkcyjnych (i Hookach!).

• Jeśli potrzebujesz resetować stan Reacta przy każdej edycji, dodaj specjalny komentarz // @refresh reset w pliku z danym komponentem.

• Fast Refresh zawsze remontuje komponenty klasowe bez zachowywania stanu. Gwarantuje to niezawodne działanie.

• Wszyscy popełniamy błędy w kodzie! Fast Refresh automatycznie ponawia renderowanie po zapisaniu pliku. Po naprawieniu błędu składniowego lub wykonawczego nie musisz ręcznie przeładowywać aplikacji.

• Dodawanie console.log lub instrukcji debugger podczas edycji to skuteczna technika debugowania.

Prosimy zgłaszać wszelkie problemy z Fast Refresh na GitHubie - zajmiemy się nimi.

Inne ulepszenia​

• Naprawiono obsługę use_frameworks! w CocoaPods. W wersji 0.60 wprowadziliśmy domyślną integrację z CocoaPods. Niestety, spowodowało to problemy w projektach używających use_frameworks!. Wersja 0.61 naprawia ten problem, ułatwiając integrację React Native z projektami iOS wymagającymi dynamicznych frameworków.

• Dodano Hook useWindowDimensions. Ten nowy Hook automatycznie dostarcza i subskrybuje aktualizacje wymiarów ekranu, zastępując w większości przypadków API Dimensions.

• Zaktualizowano Reacta do wersji 16.9. Wersja ta oznacza przestarzałe nazwy metod cyklu życia z prefiksem UNSAFE_, zawiera ulepszenia act i inne zmiany. Szczegóły oraz automatyczny skrypt migracyjny znajdziesz w wpisie o React 16.9.

Zmiany łamiące kompatybilność​

• Usunięto React .xcodeproj. W wersji 0.60 wprowadziliśmy wsparcie dla automatycznego łączenia poprzez CocoaPods. Zintegrowaliśmy również CocoaPods z testami end-to-end, dzięki czemu od teraz mamy ujednolicony standardowy sposób integracji RN z aplikacjami iOS. To skutecznie oznacza wycofanie wsparcia dla React .xcodeproj, a plik został usunięty począwszy od wersji 0.61. Uwaga: jeśli już korzystasz z automatycznego łączenia w 0.60, nie powinno to mieć na ciebie wpływu.

Podziękowania​

Dziękujemy wszystkim współtwórcom, którzy pomogli w przygotowaniu wersji 0.61!

Pełną listę zmian znajdziesz w dzienniku zmian dla wersji 0.61.

W zeszłym tygodniu na konferencji Chain React ogłosiliśmy Hermesa, otwartoźródłowy silnik JavaScript, nad którym pracowaliśmy w Facebooku. To mały i lekki silnik JavaScript zoptymalizowany do uruchamiania React Native na Androidzie. Sprawdź szczegóły!

Hermes poprawia wydajność React Native poprzez zmniejszenie zużycia pamięci, redukcję rozmiaru pobieranej aplikacji oraz skrócenie czasu potrzebnego na osiągnięcie stanu użyteczności aplikacji, czyli "time to interactive" (TTI).

„Analizując dane dotyczące wydajności, zauważyliśmy, że sam silnik JavaScript znacząco wpływał na czas uruchamiania i rozmiar pobieranej aplikacji. Mając te informacje, wiedzieliśmy, że musimy zoptymalizować wydajność JavaScript w bardziej ograniczonych środowiskach telefonów komórkowych w porównaniu do komputerów stacjonarnych czy laptopów. Po rozważeniu innych opcji stworzyliśmy nowy silnik JavaScript o nazwie Hermes. Został zaprojektowany, aby poprawiać wydajność aplikacji, ze szczególnym uwzględnieniem naszych aplikacji React Native, nawet na urządzeniach masowej sprzedaży o ograniczonej pamięci, wolnej pamięci masowej i mniejszej mocy obliczeniowej.” —Hermes: Otwartoźródłowy silnik JavaScript zoptymalizowany dla aplikacji mobilnych, począwszy od React Native

Chcesz od razu zacząć? Koniecznie zapoznaj się z naszym nowym przewodnikiem dotyczącym włączania Hermesa w istniejącej aplikacji React Native w dokumentacji!

Ilustracja: Rachel Nabors

Po miesiącach ciężkiej pracy setek współtwórców, zespół React Native Core z dumą ogłasza wydanie wersji 0.60. Ta wersja obejmuje znaczące migracje zarówno dla platform Android, jak i iOS, a także rozwiązano wiele problemów. W tym wpisie na blogu przedstawiamy najważniejsze zmiane w wydaniu. Jak zawsze, szczegółowe informacje znajdziesz w dzienniku zmian. Dziękujemy wszystkim współtwórcom za pomoc w osiągnięciu tego kamienia milowego!

Skupienie na dostępności​

Wprowadzono wiele ulepszeń do interfejsów API dostępności, takich jak announceForAccessibility, a także ulepszenia w zakresie ról, obsługi akcji, flag i innych. Dostępność to złożona dziedzina, ale mamy nadzieję, że te ulepszenia ułatwią bycie specjalistą A11Y. Koniecznie sprawdź Aktualizację React Native Open Source z czerwca 2019 po więcej szczegółów na temat tych zmian.

Nowy początek​

Ekran startowy React Native został odświeżony! Dziękujemy licznym współtwórcom, którzy pomogli stworzyć nowy interfejs. To nowe "Hello World" przywita użytkowników w ekosystemie w bardziej przyjazny i angażujący sposób.

Wsparcie dla AndroidX​

AndroidX to duży krok naprzód w ekosystemie Androida, a stare artefakty biblioteki wsparcia są wycofywane. W wersji 0.60 React Native został zmigrowany do AndroidX. Jest to zmiana łamiąca kompatybilność wsteczną, więc twój natywny kod i zależności również będą musiały zostać zmigrowane.

Dzięki tej zmianie aplikacje React Native będą musiały zacząć używać samego AndroidX. Nie można używać ich jednocześnie w jednej aplikacji, więc cały kod aplikacji i kod zależności musi używać jednego lub drugiego.

matt-oakes w discussions-and-proposals

Chociaż twój własny natywny kod będziesz musiał zmigrować samodzielnie, @mikehardy, @cawfree oraz @m4tt72 stworzyli sprytne narzędzie o nazwie "jetifier" do załatania twojego node_modules. Twórcy bibliotek będą musieli dokonać aktualizacji, ale to narzędzie zapewnia tymczasowe rozwiązanie, dając im czas na wydanie wersji dla AndroidX. Jeśli więc napotkasz błędy związane z migracją do AndroidX, wypróbuj je.

CocoaPods domyślnie​

CocoaPods stały się częścią projektu iOS w React Native. Jeśli jeszcze tego nie robiłeś, od teraz pamiętaj o otwieraniu kodu platformy iOS za pomocą pliku xcworkspace (pro tip: spróbuj xed ios z głównego katalogu projektu). Dodatkowo, podspec dla pakietów wewnętrznych zostały zmienione, aby były kompatybilne z projektami Xcode, co ułatwi rozwiązywanie problemów i debugowanie. Przygotuj się na wprowadzenie prostych zmian w swoim Podfile podczas aktualizacji do wersji 0.60, aby skorzystać z tego ekscytującego udoskonalenia. Pamiętaj, że znamy problem kompatybilności z use_frameworks! i śledzimy issue z obejściami i planowaną poprawką.

Odchudzanie rdzenia​

WebView i NetInfo zostały wcześniej przeniesione do osobnych repozytoriów, a w wersji 0.60 zakończyliśmy ich migrację z głównego repozytorium React Native. Dodatkowo, w odpowiedzi na uwagi społeczności dotyczące nowych zasad App Store, Geolocation również został wyodrębniony. Jeśli jeszcze tego nie zrobiłeś, dokończ migrację, dodając zależności do react-native-webview, @react-native-community/netinfo oraz @react-native-community/geolocation. Jeśli wolisz zautomatyzowane rozwiązanie, rozważ użycie rn-upgrade-deprecated-modules. Opiekunowie dokonali ponad 100 commitów w tych repozytoriach od czasu wyodrębnienia – cieszymy się z takiego wsparcia społeczności!

Automatyczne linkowanie modułów natywnych​

Zespół pracujący nad React Native CLI wprowadził znaczące ulepszenia w linkowaniu modułów natywnych, nazwane autolinkingiem! W większości przypadków nie będziesz już potrzebował komendy react-native link. Jednocześnie zespół gruntownie przebudował cały proces linkowania. Pamiętaj o użyciu react-native unlink dla istniejących zależności, jak opisano w powyższej dokumentacji.

Upgrade Helper​

@lucasbento, @pvinis, @kelset i @watadarkstar stworzyli świetne narzędzie o nazwie Upgrade Helper, które upraszcza proces aktualizacji. Pomaga użytkownikom React Native z brownfield aplikacjami lub złożonymi dostosowaniami w przejrzeniu zmian między wersjami. Sprawdź zaktualizowaną dokumentację upgrade'ów i wypróbuj narzędzie przy swojej ścieżce migracji!

Uwaga dla opiekunów bibliotek​

Zmiany związane z AndroidX niemal na pewno będą wymagać aktualizacji Twojej biblioteki, więc koniecznie dodaj wkrótce odpowiednie wsparcie. Jeśli nie możesz jeszcze przeprowadzić aktualizacji, rozważ przetestowanie swojej biblioteki z jetifierem, aby upewnić się, że użytkownicy będą mogli ją załatać podczas budowania.

Przejrzyj dokumentację autolinkingu, aby zaktualizować swoje konfiguracje i plik readme. W zależności od tego, jak Twoja biblioteka była wcześniej zintegrowana, możesz potrzebować dodatkowych zmian. Sprawdź przewodnik po zależnościach w CLI, aby dowiedzieć się, jak zdefiniować interfejs zależności.

Podziękowania​

Choć to tylko najważniejsze zmiany, które odnotowaliśmy, czeka nas wiele innych ekscytujących nowości. Aby zobaczyć wszystkie aktualizacje, zajrzyj do changeloga. Jak zawsze, śledźcie dalsze wieści. Tymczasem życzymy miłego korzystania z wersji 0.60!