Przejdź do treści głównej

Ogłaszamy React Native 0.63 z LogBox

· 7 minut czytania
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack
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.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.

Zrzut ekranu LogBox

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!

uwaga

Specjalne podziękowania dla Ricka Hanlona za przygotowanie sekcji o LogBox oraz Eli White za opisanie części dotyczącej Pressable w tym artykule.

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